Foros del Web » Creando para Internet » CSS »

IE6 me hace la vida cuadritos Jaja...

Estas en el tema de IE6 me hace la vida cuadritos Jaja... en el foro de CSS en Foros del Web. este es mi code CSS @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original div #contenito { background : url ( '../img/bgcontainer.jpg' ) ; background-repeat : repeat-x ; ...
  #1 (permalink)  
Antiguo 08/01/2011, 17:43
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
IE6 me hace la vida cuadritos Jaja...

este es mi code CSS
Código CSS:
Ver original
  1. div#contenito {
  2. background: url('../img/bgcontainer.jpg');
  3. background-repeat: repeat-x;
  4. width: 900px;
  5. height: 564px;
  6. margin: 0 auto;
  7. }
  8. div#columna1 {width: 202px; height: 478px; float:left; margin: 12px 0 0 20px;}
  9. div#columna1-top {background: url('../img/cont1-top.jpg'); width: 202px; height: 13px;}
  10. div#columna1-middle {background: url('../img/cont1-middle.jpg'); background-repeat: repeat-y; width: 202px; height: 449px;}
  11. div#columna1-bottom {background: url('../img/cont1-bottom.jpg'); width: 202px; height: 16px;}
  12.  
  13. div#columna2 {width: 450px; height: 478px; float: left; margin: 12px 0 0 20px;}
  14. div#columna2-top {background: url('../img/cont2-top.jpg'); width: 450px; height: 13px;}
  15. div#columna2-logo {background: url('../img/cont2-logo.jpg'); width: 450px; height: 63px;}
  16. div#columna2-middle {background: url('../img/cont2-middle.jpg'); background-repeat: repeat-y; width: 450px; height: 386px;}
  17. div#columna2-bottom {background: url('../img/cont2-bottom.jpg'); width: 450px; height: 16px;}
  18. div#columna2-content {font-size: 10pt; font-family: Tahoma; color:#FFF; margin-left:8px; padding-top: 10px;}
  19.  
  20. div#columna3 {width: 182px; height: 478px; float:left; margin: 12px 0 0 20px;}
  21. div#form {width: 182px; height: 318px;}
  22. div#columna3-top {background: url('../img/cont3-top.jpg'); width: 182px; height: 46px;}
  23. div#columna3-middle {background: url('../img/cont3-middle.jpg'); background-repeat: repeat-y; width: 182px; height:259px;}
  24. 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...
  #2 (permalink)  
Antiguo 08/01/2011, 18:13
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: IE6 me hace la vida cuadritos Jaja...

Html:

Cita:
<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:


Cita:
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!
  #3 (permalink)  
Antiguo 08/01/2011, 18:46
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: IE6 me hace la vida cuadritos Jaja...

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:
Ver original
  1. <div columna>
  2. <divs del contenido></divs cierre>
  3. </div columna cierre>
  4.  
  5. <div otro content>
  6. </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:
Ver original
  1. <div columna>
  2. <divs del contenido></divs cierre>
  3. <!-- aqio deberia estar el cierre -->
  4.  
  5. <div otro content>
  6. </div cierre content>
  7. </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
  #4 (permalink)  
Antiguo 08/01/2011, 18:56
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: IE6 me hace la vida cuadritos Jaja...

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!

Etiquetas: cuadritos, vida
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:27.