Problema con CSS en IE 6

[Lachi]

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:

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&oacute;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&ntilde;o, que no tienen sentidoe si no se las recuerda, se las materializa a trav&eacute;s del periodismo.&nbsp;<br />

&nbsp;<br />
<b>PROTAGONISTAS</b> son esas personas que van m&aacute;s all&aacute; de lo com&uacute;n, de lo l&oacute;gico, atravesando cualquier barrera. H&eacute;roes An&oacute;nimos.<br />
&nbsp;<br />
<b>PROTAGONISTAS</b> es la madre que adopto a un ni&ntilde;o con capacidades especiales, o la que arriesga su vida para serlo.<br />

Es el que sobrevivi&oacute; a un accidente, rozando el l&iacute;mite y que nos cuenta i.e. es la Vida ahora para &eacute;l.</p>
<p style="text-align: justify;">Es el que todav&iacute;a cree en la palabra&hellip;<br />
El que se convierte en el soldado de nuestras vidas, como los Bomberos.<br />
&nbsp;<br />
El que tiene &ndash; todav&iacute;a- un ni&ntilde;o dentro.<br />

El que da la mano en un mundo que se hab&iacute;a olvidado del ser humano&hellip;<br />
El que levanta un escudo de Paz entre tantas Bombas&hellip;<br />
&nbsp;<br />
Es un pergamino escrito por todos. Un mapa de mares, r&iacute;os, montes, monta&ntilde;as, volcanes de accidentes humanos que conversan con Dios, con una &uacute;nica raz&oacute;n: rescatar los valores, los reales, &iexcl;los que no se compran ni se negocian!<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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>&ldquo;&iexcl;Mi t&iacute;o fue un H&eacute;roe para m&iacute;!&rdquo;. &Eacute;l quer&iacute;a decirlo, lo tenia atragantado desde el 31 de Agosto del a&ntilde;o 1999, cuando los cordobeses fuimos los protagonistas de un accidente &ndash; anunciado- donde murieron 67 personas- Se llamar&iacute;a &ldquo; La tragedia de Lapa&rdquo;.<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> 

[nedrek]

Deberías ser más específico, y poner dónde tienes el problema, y no todo sin dar ninguna indicacion... Es difícil sin perder una suma importante de tiempo.

De primeras, sin ojear muy atento, podrías cambiar las posiciones y espacios de:

Código:

 0;

a:

Código HTML:

 0px;

También por si es el caso podrías contar que IE incluye los rellenos (padding) y bordes (border) dentro del tamaño de los elementos, por lo que podrías corregir las secciones de esta manera:

Código:

.content-half-right {
   float: right;
   width: 205px;
   border: 5px #403075 solid;
   margin: 0px;
   padding: 15px; }
html>body .content-half-right {width: 165px; } /* El tamaño correcto es este, y le sumamos el padding y el border para obtener el anterior, que es el que usará IE */

Puedes mirar informacion sobre esto AQUI



Un saludo.

[Lachi]

Hola nedrek, si tenes razon y pido disculpas por pegar todo el codigo y no especifcar la parte con la cual tengo el problema.

El código en el que tengo el problema es el siguiente:

#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;
}

En esa parte del css se definen los estilos para el menu latelar y para el contenido de la pagina.
Voy a probar los cambios que me indicaste y traere las nuevas novedades, cualquier otro aporte es bienvenido.

Saludos y gracias por la ayuda!

[Lachi]

Hola Gente! Les pido ayuda nuevamente porque me di cuenta que hay algunas de las secciones de la pagina web que se ven bien.
http://www.protagonistasentv.com.ar/detrasdecamara.php
http://www.protagonistasentv.com.ar/premios.php
http://www.protagonistasentv.com.ar/premios.php

Pero en otras paginas el diseño queda corrido:
http://www.protagonistasentv.com.ar/index.php
http://www.protagonistasentv.com.ar/historia.php

Me puse a ver los codigos de las paginas que se ven bien y las que se ven mal, y yo no encontre diferencia entre unos y otros. Es mas, todos llaman a los mismos archivos css y de la misma forma.

Por favor ayudenme a encontrar porque se ve bien en algunas secciones y en otras no.

Saludos!

[Mikmoro]

¿Si vacías por completo el cotenido del div .contentseccion en una y otra página te sigue ocurriendo lo mismo? Lo digo porque si se llaman igual y usan la misma css no tiene sentido que pase eso, excepto que el contenido de una y otra caja esté forzándolo.

En el contenido de la que falla, empiezas esa caja así:

<p> <p style="text-align: justify;"> y lo teminas </p> </p>
Arregla eso lo primero a ver.

Prueba a vaciarlas y aver qué pasa. Si se arregla, vacía la caja del que falla en una copia y vete poniéndole el contenido uno por uno.

Mikel.

[Mikmoro]

Ahhhh,

El problema son todos los &nbsp; que has metido de relleno para colocar el nombre al final. Como no les has dejado espacio entre unos y otros, no sabe donde hacer el corte y se extiende todo lo que puede de ancho.

No me rio de ti, sino de lo tonto del error

Mikel.

[Lachi]

Muchas gracias, la verdad no me habia dado cuenta.

Saludos!