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
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
Por ahora hay 9 comentarios ¿Quieres opinar?
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.
yo lo soluciono sin comentarios condicionales, solo agregando display:inline al div problematico y listo !
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.
Gracias por la solucion, estaba con el tema y no le encontraba la vuelta.
Funciona a la perfeccion.
Un saludo.
Carlos.
¿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
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!
Groso!!Me sirvio, llevaba tiempo renegando con esto, y la solucion era tan simple. Gracias amigo por la info
gracias, no entendia porque daba el problema… funciona de maravilla!!!
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!!