Error con margin en el IE 6 al usar float

A veces al hacer una maqueta nos encontramos con el problema de los márgenes en IE6, al poner columnas flotantes, se produce que una columna queda debajo de la otra. En éste artículo la solución.

El error, ocurre cuando se asigna un "margin-left" o "margin-right" y concuerda con el valor del "float", por ejemplo "float:left", si se usa margin-left.

Entonces se le asigna a "margin-left:10px" a la columna "A", la cual tiene asignado "float:left", generando por alguna razón inexplicable, un espaciado de 20px en vez de 10 (?), extraño no?, aquí el screenshot del error en Internet Explorer 6

pero en Internet Explorer 7 y en Firefox se ve correctamente como vemos en la siguiente imagen.

Que hacemos con éste dolor de cabeza?

Entonces... la instrucción "float" está generando el doble de pxs specificados de espacio

si el margen indica "left" y el float también en "left" produce éste error, pero si son distintos, por ej "margin-right" y "float:left", no hay problema, ésto no pasa con el "padding", solución, usar "_margin-left:mitad-de-pxs", es un hack para IE 6 agregarle el "_"

Leer más

CSS Display block error en Internet Explorer 6 (IE6)

Seguramente alguna que otra vez se necesita hacer lineas en CSS, pero pasa que nos encontramos con un error en IE 6, en el cual al aplicar un "display:block", crea un bloque de 19px, aunque le asignemos a esa clase o ID menos pxs.

Acá un screenshot de como se visualiza y posteriormente con el patch para ie 6.

Como solucionamos ésto?, bueno, no es tan complicado, debemos indicar en nuestro CSS un margen inferior en negativo, como el error pasa a los 19 px, le indicamos entonces "margin-bottom:-19px"

Pero ahi no se termina, porque si bien logramos que el contenido siguiente se acerque más a la línea que queremos lograr, aun vemos el color del bloque de 19 px, y nos tapa el contenido, entonces hacemos un separador, es una imagen de 19px en donde hice 2pxs como se ve en la imagen, a la cual la nombré como "bgie6.gif"

Entonces el código debe ser de la siguiente forma

Código CSS

.lineafix {display:block; height:2px; background-color:#cccccc
; _margin-bottom:-19px; _background:url(bgie6.gif) repeat-x;  }

Código HTML

<ul>
<li>Item 1</li>
<span class="lineafix"></span>
<li>Item 2</li>
<span class="lineafix"></span>
<li>Item 3</li>
</ul>

Bueno espero que les sea útil!, es la forma que encontré por el momento de solucionar ésto

Leer más