Prevenir doble margin y padding en IE 6 cuando usamos CSS Float

Prevenir doble margin y padding en IE 6 cuando usamos CSS Float

doble-margin-padding-ie6

IE 6 crea un doble margin y padding cuando usamos dicha propiedad en dos divs flotantes que caen al lado del otro.

El problema

En este código IE 6 lo leerá incorrectamente y creará doble margin y padding en nuestro elemento:

#global-column-1  {
 margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left;
}
#global-column-2  {
 margin:0 0 30px 30px; width:250px; float:left;
 }

La solución

La solución sería utilizar comentarios condicionales para que solo puedan ser vistos por IE 6. Este código que vamos a mostrar a continuación es el mismo de antes pero añadiendole el hack para que “* html #global-column-1″ solo pueda verse en IE 6. “display:inline” corrige el doble spacing en IE 6. El código resultante para corregir el doble margin y padding sería este:

#global-column-1  {
margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline;
 }
#global-column-2  {
 margin:0 0 30px 30px; width:250px; float:left;
 }

Otro truco más a tener en cuenta contra el navegador rebelde de Microsoft…

Vía | DavidWalsh

Autor de CSSBlog ES

Post relacionados


  • high_pers
    Gracias, maestro, yo tenía otro problema con diferencias de css entre navegadores, no le encontraba la solución por ningún lado y lo de * html para definir una clase sólo para explorer me salvó! y seguro me va a seguir salvando!!
  • Efrain
    gracias, no entendia porque daba el problema... funciona de maravilla!!!
  • Groso!!Me sirvio, llevaba tiempo renegando con esto, y la solucion era tan simple. Gracias amigo por la info
  • Anonimo
    Ok chicos solucionado:

    Para la columna izquierda( la que daba problemas ):
    float:left;
    width:60%;
    border:1px solid #f00;

    Para la de la derecha ( la causante de los problemas! ):
    overflow:hidden;
    border-left:1px solid #ececec;


    Simplemente añadir el overflow a la columna derecha.


    Un saludo!
  • Anonimo
    ¿Y por que razón el I.E7 me deja un espacio entre la columna flotante y el footer ?

    No logro endenderlo... ni solucionarlo!

    No hay errores de herencia... comprobado :)
  • Gracias por la solucion, estaba con el tema y no le encontraba la vuelta.
    Funciona a la perfeccion.
    Un saludo.
    Carlos.
  • elmanu
    yo lo soluciono sin comentarios condicionales, solo agregando display:inline al div problematico y listo ! :)
  • CSSBlog
    Hola elmanu, se puede utilizar sin comentarios condicionales pero entonces FIrefox y los demás navegadores podrán leerlo, y estos no tienen el problema, el único navegador que tiene el problema es Internet Explorer.

    Un saludo.
  • Daniel
    Hoy mismo me ha pasado eso, nunca me acuerdo que IE6 es un tanto "especial" y terminas dándole vueltas a todo. Recordé que no pasaba con la versión 7, así que lo actualicé (uso XP en una máquina virtual) y el problema "se fue". A veces nos comemos la cabeza con el diseño para IE6, pero creo que deberíamos ir dejándolo de lado si no son fallos graves.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes