Margen duplicado para IE6

17/dic/2007 15

Anoten un error más de despliegue por parte de IE6, por si no se han convencido de que este browser ha sido uno de los peores de la historia de la informática de todos los tiempos. Este es un problema muy específico pero habitual que involucra cajas flotantes (por eso lo habitual) y la definición de su margen.

Cuando defines un float para una caja contenedora hacia un lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. Así nomás, sin pedir permiso.

Ver ejemplo (en IE6).

Bueno el HTML y CSS para este ejemplo será bastante básico:

#caja {
     float: left;
     margin-left: 100px;
}

Para esta #caja, lo que se hizo fue darle un float: left; y un margin-left: 100px; Pero IE6 lo que hace es interpretar 200px a esa caja de margin-left. Quién lo entiende…

Pero bueno, la idea es darle una solución a esa gracia de browser (y no mediante un hack). Para corregirlo, es sólo agregar un display: inline; a #caja y todo se resuelte.

#caja {
     float: left;
     margin-left: 100px;
     display: inline;
}

Ver ejemplo final (IE6)

Link:

Comentarios

  1. fearlex [#]

    Whoa !!!!!!!!!! Esa no me la sabia, si, notaba el error, por pero pense que si el reset universal no lo corregia era por algun bug extraño y jamas busque la solucion, o sea lo solucionaba con una hoja condicional para IE6, mucho menos sabia que esto sucedia, cuando floatabas y agragabas margen en la misma direccion, y mucho menos como arreglarlo 😀

    Gracias por esto 😀 y por postear mas a menudo (todos los dias, ultimamente) 😀

  2. Carlos Cazorla [#]

    “pero IE6 lo manda a un margin de 200px! Insolente…” jejejejejeeje.
    Buen post. Gracias!

  3. dubó [#]

    uhhh excelente. justo estaba batallando contra este error. como anillo al dedo.

  4. emilio [#]

    pero si lo pasamos a display:inline; perdemos las propiedades de caja como height, entre otras
    me parece q la solucion optima seria


    #caja {margin-left: 50px;}

    saludos

  5. cesar [#]

    exelente , se agradece este dato justamente estaba diseñando un newsletter html css , lo aplique y me funciono de inmediato. saludos 😀

  6. cesar [#]

    una pregunta alguien sabe como aplicar hacks para IE7 , como se agregan etc .saludos

  7. Droid [#]

    Excelente tip, gracias.

  8. pollaki [#]

    ja!! no es tan raro que IE6 interprete 200px cuando le indicas 100.. lo raro es que se arregla con un “display:inline!”

    que desastre IE!

    Buen tip!

  9. CSSLab Admin [#]

    emilio, el display: inline; no interfiere con las propiedades intrinsecas de DIV por ej. el height q mencionas. Hice un ejemplo 3 para q veas como se comporta. salu2.

  10. Emilio [#]

    tenes razon!
    aunq yo prefiero poner una hoja adicional para corregir errores de IE

  11. Fernando Herrera Cervantes [#]

    Muchas gracias, no sabes como me ha dado de problemas ese error, la verdad que insolencia de navegador, no veo la hora de que lo dejen de utilizar.
    De nuevo, muchas gracias.

  12. josedelaranda [#]

    Muy bueno el post, por fin encuentro una explicación a este problema en IE. Muchas gracias por la ayuda

    Saludos desde Perú

  13. lobo8 [#]

    GRACIAS!!!! Justo ahora me estaba encontrando el problema, y gracias a esta web, lo he solucionado. Increible.

    Un Saludo

  14. Hacks CSS « ddsign [#]

    […] Margen duplicado para IE6 posted in CSS Cuando defines un float para una caja contenedora hacia un lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. 100% alto, finalmente para todos Una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Alto mínimos para IE6 (y el resto, claro) IE6 no soporta la propiedad min-height para definir un alto mínimo para un contenedor, pero se puede conseguir con este truco. Textos muy largos que quiebran nuestro layout La propiedad word-wrap […]

  15. luizdev [#]

    muy buen tip ya me habia topado con el y sabia del display: inline, pero no sabia porque se producia.
    gracias

Responder a luizdev ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab