Despejando Floats para IE7
Visita este artículo en http://www.estadobeta.com/2006/12/06/despejando-floats-para-ie7/
Por Ismael en CSS, artículos, tipsTruco CSS para corregir floats en Internet Explorer 7
¿Vieron ya sus sitios web en Microsoft Internet Explorer 7? Yo si, y en primera instancia puede ser descorazonador: desajustes de diagramación, elementos completos que desaparecen, complejos hacks de CSS para IE6 que ya no funcionan, en fin, un desastre total.
Para un sitio en particular, una revisión exhaustiva me dió algunas buenas noticias: IE7 soporta position:fixed y position:absolute de forma correcta. Además soporta min-height, max-height y sus equivalentes para width, todas estas mejoras espectaculares si te importa diseñar con Estándares Web y las versiones anteriores de IE te estaban dando dolores de cabeza.
Sin embargo, había algo en mis CSS que hacía que mi sitio (peor: el sitio de un cliente importante) se viera como si alguien hubiera detonado la Zar Bomba justo en medio del HTML.
Mediante el método tradicional de eliminar pequeños bloques de código a la vez, llegué a descubrir un sospechoso inesperado (la información está en la web, pero le estoy poniendo dramatismo). Se acuerdan de la clase clearfix? La he recomendado varias veces en este sitio y su objetivo es eliminar un molesto problema cuando tienes varios floats dentro de un DIV contenedor (¿más detalles? Jorge lo explica letra por letra).
Clearfix es una solución elegante; evita ensuciar el html (el clásico <div style="clear:both"></div>) y centraliza la solución para múltiples páginas en unas pocas líneas de código.
Pero no funciona en IE7.
Cuento corto: agrega una hoja de estilos sólo para IE7, usando comentarios condicionales:
-
-
<!–[if IE 7]>
-
<link rel="stylesheet" href="/estilos/ie7.css" type="text/css" media="all" />
-
< ![endif]–>
-
En la nueva hoja de estilos, agrega un par de reglas a la clase clearfix (que ya tienes definida en tu hoja de estilos general). Estas reglas hacen que clearfix funcione correctamente en IE7.
-
-
/*
-
Arreglo a clearfix
-
—————————-*/
-
.clearfix {
-
display:inline-block;
-
}
-
.clearfix {
-
display:block;
-
}
-
¿Parece contradictorio? Lo es, pero sin embargo funciona. Es necesario definir display:inline-block en un selector, y luego display:block en otro igual. Pero deben ser dos selectores separados, uno despues de el otro y en el mismo orden. Todo esto en un archivo CSS exclusivo para IE7 gracias al uso de comentarios condicionales en el HTML
Voilà! Aunque parecía el fin del mundo, no lo era. Anda a tomarte una cerveza.
Links
- New Clearing Method Needed for IE7, en 456 Berea Street.
- Flotando en la Incertidumbre, en CSSLab
- Clearing Floats without structural MArkup in IE7, en Stuff and Nonsense
- Comentarios Condicionales para Internet Explorer, en QuirksMode
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
12/6/2006 at 9:40 pm
Si se, puedo aplicar google, pero sabes como instalar IE 7 en una version (shhh) pirate de xp?
Saludos.
Lo unico que tengo es browsershots, quede helado cuando veo mi sitio en ie7, pero ir probando de esa manera es algo lento, conozco algunos otros servicios similares como sitevista.com pero no es lo mismo que probar ai, en tu equipo, probando.
http://browsershots.org/website/http://www.orelworks.com/
12/6/2006 at 11:38 pm
Me perdí: un “overflow:auto” o “overflow:hidden” en el contenedor no consiguen el mismo efecto?
12/6/2006 at 11:40 pm
Excelente aporte y gracias por compartirlo Ismael. Definitivamente, esta solución quitará varios dolores de cabeza.
Saludo cordial.
12/8/2006 at 8:51 pm
Nicolás Orellana:
Bájate una versión standalone de IE7 (http://www.google.com/search?client=opera&rls=es-es&q=standalone+IE7&sourceid=opera&ie=utf-8&oe=utf-8). Puedes buscar en bittorrent también. Ojo que no tienes que ocuparla junto a IE6 o queda la crema.
Pero yo quería poner otro tema en el tapete. ¿alguien a ocupado IE7 junto a una versión standalone de IE6 (como la que está en evolt.org)?, ¿cómo le ha funcionado?
12/11/2006 at 4:27 pm
No es que EstadoBeta auspicie la piratería, pero el amigo de un amigo de un amigo instaló IE7 sin necesidad de legitimar su copia de Windows siguiendo cuidadósamente las instrucciones en http://fmshaon.blogspot.com/2006/10/how-to-install-internet-explorer-70.html.
Hasta ahora funciona todo bien (dice mi amigo). Eso si, perdió IE6.
12/14/2006 at 9:34 am
una pregunta fuera de contexto :
la imagen de arriba (la del código)
¿a que editor corresponde?
12/14/2006 at 1:03 pm
Es TextMate.
Ismael, algún día vas a liberar el cms que creaste para tu sitio ismaelcelis.com?
12/15/2006 at 10:03 pm
Si, mi editor de preferencia actualmente es TextMate (sólo para Mac por ahora).
Rodrigo: el CMS que uso en mi sitio personal es un semi-clon de Ruby on Rails en PHP, que hice como ejercicio para entender los detalles de la implementación de un framework MVC. Ahora que conozco de cerca al increíblemente Rails u otras aproximaciones en PHP como Trax o Cake, me da un poco de pudor mostrar las imperfecciones de mi código (si lo vieras…. Ahí se nota que nunca estudié ingeniería!).
No es por poco espíritu Open Source, pero considero ese CMS apenas un ejercicio.
Saludos desde Rosario, Argentina!
12/17/2006 at 11:31 pm
Ahi esta para las manzanitas
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {display: inline-block;} ====>>> para todos los navegadores
1/3/2007 at 5:52 pm
puedes solucionar lo de la instalación de IE7 sin perder IE6
revisa ese documento
http://www.cristalab.com/tips/30716/como-correr-internet-explorer-6-y-7-al-mismo-tiempo
1/6/2007 at 11:20 am
Bueno, la solución que señala khafra es utilizar versiones standalone (que no requieren instalación) junto a IE6. Parecido a mi sugerencia, salvo que es mucho mejor porque descargas varias versiones de Internet Explorer sólo con apretar un autoejecutable. En evolt.org tienes que bajarte cada una de las versiones de Internet Explorer que deseas utilizar junto a IE6 y descomprimirlas.
Relacionado a esto. Finalmente instalé IE7 y descargué la versión standalone de IE6 que se encuentra en evolt.org. Y al parecer no hay conflictos (en algunas páginas se señalaba que los podía haber).
1/11/2007 at 3:29 pm
alguien me puede explicar como agregar el “clearfix” al contendedor que tenga otra class ya asignada ( no deseo utlizar el id=”contenedor” )
Gracias..
1/11/2007 at 3:33 pm
Alejandro: es perfectamente válido poner más de una clase por elemento, así:
<div class="contenedor clearfix">
...
</div>
1/16/2007 at 4:42 pm
Despejando Floats para IE7…
Truco CSS para corregir floats en Internet Explorer 7….
1/17/2007 at 3:02 pm
[…] Uno de los problemas más comunes es el extraño comportamiento de elementos cuyos elementos “hijos” tienen el atributo “float”. Estos elementos “contenedores” colapsan verticalmente (el borde inferior se pega al superior) causando todo tipo de rarezas. Si le pones color de fondo a estos elementos no verás nada. El elemento está ahí, pero su alto es 0. La solución simple es darle un alto fijo: height:200px. El problema de esto es que el elemento no se ajustará automaticamente al alto de sus hijos. Por fortuna hay otros métodos sencillos para solucionar esto. […]
3/7/2007 at 5:50 am
generic viagra…
…
3/12/2007 at 6:06 pm
[…] v1.1: clearfix con IE7 agregado (estadobeta.com). […]
5/9/2007 at 7:43 pm
Da delo dazhe ne v goda. Edmondo Nova.
5/16/2007 at 8:57 am
Otro tutorial de como usar ie6 e ie7 a la vez
http://www.fjnavarro.es/desarrollo-web/aplicaciones/como-tener-instalados-internet-explorer-6-y-7/
5/31/2007 at 7:30 pm
Chto s holodami ne v lada. Riley Pilar.