Mediciones erradas con IE6

[Snd234]

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!

[webosiris]

Iniciado por Snd234

Es común este problema en IE6? De que forma puedo solucionarlo?

Si, por lo que vi es el Doubled Float-Margin Bug..en esa web lo explican bien, pero por si no entendes inglés te lo explico:

pasa cuando hay un margen y un float en la misma dirección (left y left, right y right) y el margen queda entre el float y el borde de una capa contenedora

Solución: agregá

Código:

display: inline;

a los bloques que estan flotando con este bug (content y sidebar)

[Snd234]

En la pagina lo explica muy claro, gracias por explicarlo de todas formas
ya lo modifique y se soluciono ;)

Gracias!