Hola Gente, desarrolle una pagina web en donde implemento CSS.
La pagina se ve correctamente en Firefox, Internet Explorer 7 y Opera, pero para Internet explorer 6 queda defasada.
Estuve trabajando sobre los códigos, pero no he podido llegar a dar con la configuración correcta.
Les pido por favor que me den una mano, para poder corregir el error que no puedo encontrar.
La pagina es:
http://www.protagonistasentv.com.ar/
El codigo CSS es:
Cita: body {
margin: 15px 0;
padding: 0;
background: #fff url(images/fondo.jpg) repeat-x;
font-size: 100%;
}
p, ul, li,td, tr, dl, dh {
font: 0.8em/1.65em verdana, arial, geneva, sans-serif;
color:#666;
word-spacing: 0.15em;
text-align: justify;
}
.pnegrita{
font: 0.8em/1.65em verdana, arial, geneva, sans-serif;
font-weight: bold;
text-align: justify;
}
h1, h2, h3 {
font-family: arial, verdana, geneva, sans-serif;
text-align: left;
color: #666;
}
h1 {
/* defines the font size for all heading 1 (h1) */
text-transform: uppercase;
font-size: 12pt;
color: #999999;
border-bottom: 2px solid #8a99ab;}
h2 {
font-size: 11pt;
border-bottom: 1px solid #8a99ab;
}
h3 {
font-size: 1.1em;
}
/* specific divs */
#wrapper {
width: 760px;
margin: 0 auto;
padding: 0;
background: #fff url(images/fondo.jpg) no-repeat;
text-align: center;
position: relative;
}
#banner {
background: #fff url(images/header1.jpg) top left;
width: 760px;
height: 185px;
margin: 0;
padding: 0;
}
#banner p {
margin: 0;
position: absolute;
top: 105px;
right: 50px;
font-weight: bold;
}
#nav-toplevel {
}
#nav-meta {
position: absolute;
top: 10px;
left: 15px;
margin: 0;
padding: 0;
}
#nav-meta li {
margin: 0;
padding: 5px;
font-size: 75%;
}
#nav-meta li a {
text-decoration: none;
padding: 0px 0px;
background: #eee;
border: 1px #999 solid;
color: #999;
font-weight: bold;
margin:0;
}
#nav-meta li a:hover {
background:#ccc;
color: #333;
border: 2px #333 solid;
}
#nav-main {
position: absolute;
right: 15px;
top: 25px;
margin: 0;
padding: 0;
height: 100px;
color: #ffffff;}
#nav-mail ul, #nav-meta ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav-main li {
display: inline;
margin: 0;
padding: 0px;
font-size: 90%;
}
#nav-main li a {
padding: 0px 0px;
text-decoration: none;
color: #666;
font-weight: bold;
background: #ECF3FD;
border: 2px #ccc solid;
}
#nav-main li a:hover {
color: #333;
background: #99CCFF;
border: 3px #333 solid;
}
#container {
clear: left;
width: 760px;
background: url(images/menu.jpg) no-repeat;
margin: 0px;
padding-top: 10px;
}
#container p, ul, ol {
text-align: justify;
margin: 0;
padding-top: 0px;
}
#nav-subs {
width: 150px;
min-height: 383px;
background-color: transparent;
padding-top: 65px;
padding-right:45px;
margin: 0px 0px 0px 45px !important;
}
#nav-subs li {
font-size: small;
text-align: left;
border-bottom: 1px #474d57 solid;
padding-left: 2px;
}
#nav-subs a {
display: block;
text-decoration: none;
color: #fff;
font-weight: bold;
}
#nav-subs a:hover {
display: block;
border-bottom: none;
background-color: #c5bdf2;
}
#nav-subs ul {
padding-top: 15px;
list-style-type: none;
margin: 0;
padding-left: 0px !important;
}
#content {
margin: 0em 10px 0em 0px;
width: 500px;
float: right;
background: transparent;
}
.contentseccion {
padding: 15px;
background-color: #fff;
border: 5px #403075 solid;
}
.content-half-left{
float: left;
width: 205px;
border: 5px #403075 solid;
margin: 0px;
padding: 15px;
}
.content-half-right {
float: right;
width: 205px;
border: 5px #403075 solid;
margin: 0px;
padding: 15px;
}
#content p.negrita {
font-weight: bold;
}
#content img.derecha{
float: left;
margin: 3px 15px 5px 0;
padding:2px;
border:1px solid #CCCCCC;
}
#content img.izquierda{ float: right;
margin: 3px 0 5px 15px;
padding:2px;
border:1px solid #CCCCCC;
}
#content img.centrada{ float: none;
margin: 3px 15px 5px 75px;
padding:40px;
border:1px solid #CCCCCC;
}
#content a, #info-site a {
text-decoration: none;
color: #4a3c7a;
font-weight: bold;
}
#content a:hover, #info-site a:hover {
color: #999;
border-bottom: 1px dashed #999;
}
#info-site {
clear: both;
background: #fff url(images/footer.jpg) no-repeat;
height: 164px;
margin: 0;
padding: 0;
}
#info-site p {
margin: 0;
padding: 0;
text-align: center;
}
y El Html es:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Protagonistas</title>
<link href="mac1.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" type="text/css" href="style.css" /> </head>
<body>
<div id="wrapper">
<div id="container">
<div id="content">
<div class="contentseccion">
<h1> <a href="#">¿Que es Protagonistas?</a> </h1>
<p> <p style="text-align: justify;">Es una opción. Es un periodismo con un estilo muy personal. P<b><img width="150" vspace="5" hspace="10" height="91" align="right" src="/images/image/teleocho.jpg" alt="" /></b>ero qu habla de todos. Esas historias que no tienen dueño, que no tienen sentidoe si no se las recuerda, se las materializa a través del periodismo. <br />
<br />
<b>PROTAGONISTAS</b> son esas personas que van más allá de lo común, de lo lógico, atravesando cualquier barrera. Héroes Anónimos.<br />
<br />
<b>PROTAGONISTAS</b> es la madre que adopto a un niño con capacidades especiales, o la que arriesga su vida para serlo.<br />
Es el que sobrevivió a un accidente, rozando el límite y que nos cuenta i.e. es la Vida ahora para él.</p>
<p style="text-align: justify;">Es el que todavía cree en la palabra…<br />
El que se convierte en el soldado de nuestras vidas, como los Bomberos.<br />
<br />
El que tiene – todavía- un niño dentro.<br />
El que da la mano en un mundo que se había olvidado del ser humano…<br />
El que levanta un escudo de Paz entre tantas Bombas…<br />
<br />
Es un pergamino escrito por todos. Un mapa de mares, ríos, montes, montañas, volcanes de accidentes humanos que conversan con Dios, con una única razón: rescatar los valores, los reales, ¡los que no se compran ni se negocian!<br />
VERONICA MINARDI</p> </p><br />
</div>
<br />
<div class="content-half-left">
<h2><a href="ultimoprograma.php"> LA TRAGEDIA DE LAPA </a></h2>
<p><p>“¡Mi tío fue un Héroe para mí!”. Él quería decirlo, lo tenia atragantado desde el 31 de Agosto del año 1999, cuando los cordobeses fuimos los protagonistas de un accidente – anunciado- donde murieron 67 personas- Se llamaría “ La tragedia de Lapa”.<img width="190" height="88" align="middle" src="/images/image/lapa.jpg" alt="" /></p></p>
<p><a href="ultimoprograma.php"> Leer más...</a></p>
</div>
<div class="content-half-right">
<h2>OPINIONES</h2>
<p><img width="180" height="80" src="/images/imagen3.jpg" alt="" /> <br />
Grandes escritores y artistas nos dejan sus opiniones sobre el programa, no te las pierdas!</p><br />
<p>
• <a href="veropinion.php?var=8"> Iván Ferreyra - Actor de Reparto</a><br />
• <a href="veropinion.php?var=2"> Prof. Miguel A. Pérez Gaudio.</a><br />
</p>
</p>
</div>
</div>
<!--
End of main content section
-->
<!-- Menu -->
<div id="nav-subs">
<div id="button">
<ul title="Menu">
<li><a href="index.php">Inicio</a></li>
<li><a href="historia.php">La Historia</a></li>
<li><a href="premios.php">Premios</a></li>
<li><a href="detrasdecamara.php">Detras de Cámara</a></li>
<li><a href="programacion.php">Programación</a></li>
<li><a href="dejatuhistoria.php">Dejá tu Historia</a></li>
<li><a href="video.php">Avances</a></li>
</ul><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="images/bannerlat.jpg" alt="" /><br /><br /><br />
</div>
</div>
</div>
<!--
Start of footer type info
-->
<div id="info-site">
<p id="info-company">Todos los derechos reservados | Realizado por neodux</p>
</div>
<!--
End of footer type info
-->
</div>
</body>
</html>