08 abril 2008

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 "_"



1 comentarios:
Pancho dijo...

Excelente capo, funciona perfectamente sacando margin-right

Saludos

HAZ CLIC AQUÍ PARA AGREGAR UN COMENTARIO