IE6 me hace la vida cuadritos Jaja...

[Kurozaki]

este es mi code CSS

Código CSS:

div#contenito {
background: url('../img/bgcontainer.jpg');
background-repeat: repeat-x;
width: 900px;
height: 564px;
margin: 0 auto;
}
div#columna1 {width: 202px; height: 478px; float:left; margin: 12px 0 0 20px;}
div#columna1-top {background: url('../img/cont1-top.jpg'); width: 202px; height: 13px;}
div#columna1-middle {background: url('../img/cont1-middle.jpg'); background-repeat: repeat-y; width: 202px; height: 449px;}
div#columna1-bottom {background: url('../img/cont1-bottom.jpg'); width: 202px; height: 16px;}
 
div#columna2 {width: 450px; height: 478px; float: left; margin: 12px 0 0 20px;}
div#columna2-top {background: url('../img/cont2-top.jpg'); width: 450px; height: 13px;}
div#columna2-logo {background: url('../img/cont2-logo.jpg'); width: 450px; height: 63px;}
div#columna2-middle {background: url('../img/cont2-middle.jpg'); background-repeat: repeat-y; width: 450px; height: 386px;}
div#columna2-bottom {background: url('../img/cont2-bottom.jpg'); width: 450px; height: 16px;}
div#columna2-content {font-size: 10pt; font-family: Tahoma; color:#FFF; margin-left:8px; padding-top: 10px;}
 
div#columna3 {width: 182px; height: 478px; float:left; margin: 12px 0 0 20px;}
div#form {width: 182px; height: 318px;}
div#columna3-top {background: url('../img/cont3-top.jpg'); width: 182px; height: 46px;}
div#columna3-middle {background: url('../img/cont3-middle.jpg'); background-repeat: repeat-y; width: 182px; height:259px;}
div#columna3-bottom {background: url('../img/cont3-bottom.jpg'); width: 182px; height: 13px;}
 

Este es mi HTML

Código HTML:

<div id="contenito">
		<div id="columna1">
			<div id="columna1-top"></div>
			<div id="columna1-middle"></div>
			<div id="columna1-bottom"></div>
		</div>
			
		<div id="columna2">
			<div id="columna2-top"></div>
			<div id="columna2-logo"></div>
			<div id="columna2-middle"></div>
			<div id="columna2-bottom"></div>
		</div>
			
		<div id="columna3">
			<div id="columna3-top"></div>
			<div id="columna3-middle"></div>
			<div id="columna3-bottom"></div>
		</div>
	</div> 

y una breve explicacion

son 3 divs padres (columna1 - 2- 3)
dentro e cada div padre tengo otros divs, que es donde coloco una imagen de bottom, otra de top y lo del medio que es donde iria el contenido

El contenedor tiene una anchura de 900px
distribuido entre los 3 divs padres, no superan los 900px, pero la tercer columna se me baja.
Esto solo con IE6, con ie7 en adelante todo bien

Que podra hacer???, ya revise y revise, quite margenes, etc etc... y no se arregla.

Ayuda porfa...

[PrendekZ]

Html:

<div id="contenito">
<div id="columna1">
<div id="columna1-top"></div>
<div id="columna1-middle"></div>
<div id="columna1-bottom"></div>
</div>

<div id="columna2">
<div id="columna2-top"></div>
<div id="columna2-logo"></div>
<div id="columna2-middle"></div>
<div id="columna2-bottom"></div>
</div>

<div id="columna3">
<div id="columna3-top"></div>
<div id="columna3-middle"></div>
<div id="columna3-bottom"></div>
</div>
</div>

css:

div#contenito{background: Url('../img/bgcontainer.jpg') repeat-x; width:900px; height:564px; margin:0 auto;}
div#columna1 {width:202px; height:478px; float:left; margin:12px 0 0 0;}
div#columna1-top {background:url('../img/cont1-top.jpg'); width:202px; height:13px;}
div#columna1-middle {background:url('../img/cont1-middle.jpg') repeat-y; width:202px; height:449px;}
div#columna1-bottom {background:url('../img/cont1-bottom.jpg'); width:202px; height:16px;}

div#columna2{width:450px; height:478px; float:left; margin:12px 20px 0 20px;}
div#columna2-top{background:url('../img/cont2-top.jpg'); width:450px; height:13px;}
div#columna2-logo{background:url('../img/cont2-logo.jpg'); width:450px; height:63px;}
div#columna2-middle{background:url('../img/cont2-middle.jpg') repeat-y; width:450px; height:386px;}
div#columna2-bottom{background:url('../img/cont2-bottom.jpg'); width:450px; height:16px;}
div#columna2-content{font-size:10pt; font-family: Tahoma; color:#fff; margin-left:8px; padding-top:10px;}

div#columna3{width:182px; height:478px; float:left; margin:12px 0 0 0;}
div#form{width:182px; height:318px;}
div#columna3-top{background:url('../img/cont3-top.jpg'); width:182px; height:46px;}
div#columna3-middle{background:url('../img/cont3-middle.jpg') repeat-y; width:182px; height:259px;}
div#columna3-bottom{background:url('../img/cont3-bottom.jpg'); width:182px; height:13px;}

Te mejore un poco el código y son problemas a la hora de maquetador de la mayoría de la gente que no se acuerda que margín también es un valor sumativo a la hora de este y como tenias 900px en el contenedor y el ancho de las 3 columnas + los margin superaban los 900px fíjate la próxima vez.

Saludos!

[Kurozaki]

no amigo, mis margenes no superan 900 px.

columna 1 --> 202px margin-left --> 20px
columna 2 --> 450px margin-left --> 20px
columna 3 --> 182px margin-left --> 20px

450 + 202 + 182 + 60 = 894px, asi que sobran 6px, y estos 6px son el margin-right de la columna3.

Aunque te agradesco el esfuerzo
P.D: no solo ando dando mi critica teorica, si cale tu codigo y sigue igual.
_____________________________
Me he puesto a pensar en revisar mas contenedores que tengo abajo de estas cosas.
Aun no lo reviso, puesto que ando trabajando y me llegan clientes, que no me dan chance de darle una revisadita, pero creo que un contenido de abajo de las 3 columnas.

Las he de haber enganchado, con una columna.

Es decir:

Código HTML:

<div columna>
<divs del contenido></divs cierre>
</div columna cierre>
 
<div otro content>
</div cierre content>
 

pero lo que yo digo es que debi enganchar algun contenido, cerrando la etuiqueta de alguna columna hasta muchos despues, y asi, el agarro mas contenido con mas ancho y lo hizo como si fuera de su columna asi:

Código HTML:

<div columna>
<divs del contenido></divs cierre>
<!-- aqio deberia estar el cierre -->
 
<div otro content>
</div cierre content>
</div columna cierre> <!-- por error lo cerre hasta aca -->
 

tengo la corazonada de que esto es...
Lo revisare más tarde y les cuento. Por que mi codigo esta al 100 valido por w3c

[PrendekZ]

http://westdeveloping.net/prueba.html

Lo eh visto por IE Testers donde puedo ver todas las versiones de IE y se ve bien.. no se que tienes mal 8-)

Hasta probado el IE 5.5 y se ve perfecto, excepto que no se centra el div ;)

eh colocado ese background gris ya que no poseo las imágenes de las columnas.

Tambien al contenedor se te olvido colocarle overflow:hidden.

PD: No sume los valores de todas las columnas + margin, lo que hice fue colocar más grande el width del contenedor y se veia bien a partír de allí donde fue donde entre a modificar.

Saludos!