06 abril 2008

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