Puedes recibir las actualizaciones gratis por email

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

Sigue la onda...

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

Autor de CSSBlog ES

Por ahora hay 9 comentarios ¿Quieres opinar?

02.07.09

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.

02.07.09

yo lo soluciono sin comentarios condicionales, solo agregando display:inline al div problematico y listo ! :)

02.07.09

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.

02.07.09

Gracias por la solucion, estaba con el tema y no le encontraba la vuelta.
Funciona a la perfeccion.
Un saludo.
Carlos.

02.07.09

¿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 :)

02.07.09

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!

02.07.09

Groso!!Me sirvio, llevaba tiempo renegando con esto, y la solucion era tan simple. Gracias amigo por la info

02.07.09

gracias, no entendia porque daba el problema… funciona de maravilla!!!

02.07.09

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!!

Escribir un comentario

Tu comentario:
* El nombre, email y el comentario son requeridos
Comentaristas del mes
Últimos comentarios
  • Boda: Gracias Pedro, lo probaré a ver si me funciona bien porque le iría perfecto a mi blog que...
  • drakkar: hola necesito centrar el menu dentro del div que lo contiene pero mira lo que pasa cuando hago esto: <...
  • Erik: Gracias muchas.. muy bueno!
  • Pedro CM: Ya veo que lo retwitteaste por Twitter, me alegro ;-) . My recent post Pack de 100000 tipografías...
  • JuniHH: Te agradezco muchismo el enlace de los bordes redondeados sin necesidad de JS's raros. Cuando...
Patrocinadores