Hola, bueno estoy realizando un sitio y para visualizarlo uso IE7, Firefox y Opera. Pero ahora que estoy ya casi terminando quise ver como se vería la pagina con IE6 y para esta se deforma entera, además de darme cuenta que IE6 no soporta las transparencias en los archivos PNG (bueno, pero este ultimo punto ya tengo la solución).
El problema es que tratando de averiguar porque IE6 deforma la pagina, me pille con que al darle las medidas a los DIV, especialmente los márgenes, este al visualizarlo no los muestra como debería, sino que muestra el doble.
Aquí unas fotos para visualizar mejor el problema.
*ttp://img258.imageshack.us/img258/4818/untitled1zq4.png
La pagina estra estructurada de esta forma
Contenedor principal: 780px
-- Header
-- Main
---- Content
---- Sidebar
-- Footer
El
Main, tiene el fondo que se debería repetir hasta el final (en la foto solo sale al principio). Este tiene la misma medida que el contenedor principal, es decir
780px.
Bueno,
Content esta flotando a la izquierda, y mide 530px (528px al centro + 2px de los bordes laterales)
Y
Sidebar mide 170px (168 al centro + 2px de los bordes laterales).
Es decir, llevo 700px hasta el momento.
Luego a
Content le doy un margen izquierdo de 30px y a
Sidebar le doy un margen derecho de 30px también, debiendo quedar al centro un margen de 20px entre
Content y
Sidebar, completando así los 780px (Visto con IE7, Firefox y Opera este diseño anda sin problemas).
Bueno, el asunto, que en la foto, aparece la forma correcta en la que quiero que aparesca, pero, vean los estilos que le tengo asignados.
Código:
.content {
border: 1px solid #000000;
width: 528px;
margin-left: 15px;
float: left;
background-color: #FFFFFF;
text-align: left;
}
.sidebar {
border: 1px solid #000000;
width: 168px;
float: right;
margin-right: 15px;
text-align: left;
}
Fíjense, que a los márgenes (
margin-left y
margin-right) le estoy dando 15px, porque IE6 me toma ese valor como el doble, ósea me da los 30px que en realidad quiero que me muestre. Si le diera 20px a
Content para la izquierda y 20px para
Sidebar a la derecha, habría un espacio de 0px entre
Content y
Sidebar, si le diera mas, la pagina se deforma y
Sidebar queda abajo de
Content, sin embargo esta misma pagina con ese estilo, visto con IE7, Firefox y Opera muestra los 15px y ese no es el valor que quiero darle.
Es común este problema en IE6? De que forma puedo solucionarlo?
Gracias!