Margen duplicado para IE6

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:

  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 :D

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

  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 :D

  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. luizdev

    muy buen tip ya me habia topado con el y sabia del display: inline, pero no sabia porque se producia.
    gracias
  1. [...] Margen duplicado para IE6 posted in CSS Cuando defines un float para una caja contenedora hacia un lado y ...
    Hacks CSS « ddsign