El lunes pasado, estábamos en plena euforía por el lanzamiento de Mariposas en la maleta, el nuevo blog de la red Blogpocket Multisite cuando nos avisaron de que en Internet Explorer 7 no se veía bien la plantilla.

Los problemas con la interpretación del CSS (Cascading Style Sheets) en Internet Explorer son bien antiguos y se arrastran, desde sus inicios en la web hace muchos años, con todas las versiones del navegador de Microsoft, incluida la más reciente (IE 8).

Los desarrolladores, para que una página web se vea bien en todas las versiones de Internet Explorer, han venido haciendo encaje de bolillos utilizando toda clase de técnicas y herramientas para cuadrar CSS y navegadores. Una de las herramientas que se suele utilizar es alguna de los servicios online con los que se puede comprobar el aspecto de una página en los diversos navegadores y sus versiones. Por ejemplo, con Browser Shots puedes solicitar de forma gratuita una captura de tu página en varios navegadores. Sin embargo, el proceso se alarga en el tiempo pues tus peticiones son enviadas a una cola para la revisión.

En nuestro caso de los blogs de Blogpocket Multisite, lo primero que hice fue hacerme con una aplicación que simulara las distintas versiones de Internet Explorer en Windows que es donde se encuentra el problema. Encontré IE Tester y una vez instalado comprobé que, efectivamente, el bloque de contenido (las tres columnas que forman la plantilla) no se situaba por debajo de la cabecera (compuesta por el logo y el menú horizontal de opciones).

IE Tester te permite visualizar una página en IE 5.5, IE 6, IE 7 e IE 8. Descarté IE 5.5 e IE 9, el primero porque lo debe utilizar muy poca gente y el segundo porque no lo contempla la aplicación, por lo menos directamente (hay un tutorial para instalarlo pero requiere Vista SP2 or Windows 7). Agradecería si algún lector tiene IE 9 y puede comprobar cómo se ven los blogs de Blogpocket Multisite ;) .

Una vez identificada las instrucciones del CSS implicadas (en este caso, un margen superior), se trataba de aplicar uno de los hacks existentes para IE 7. Un hack es la modificación de una instrucción de CSS para que solo sea interpretada por un determinado navegador. Por ejemplo, uno de los más simples es añadir un asterisco delante del elemento en cuestión. Eso solo lo entienden IE 6 e IE 7 pero no el resto, así que podríamos tener el siguiente hack dentro de nuestro archivo CSS:

background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */

De esa forma todos los navegadores verían la página con fondo de color #fff, excepto las versiones 6 y 7 de IE que lo verían de color #000.

Para el problema que nos ocupa, apliqué el hack de combinar el asterisco delante del elemento junto con el literal “!important;” que solo sirve para IE 7.

Pueden ver estos hacks en Gran Ímpetu: Hack CSS para Internet Explorer 7.

Y ya de paso, arreglé otro error en el footer para IE 8, gracias a Angel Custodio.

Otra solución, y mejor, es aplicar CSS en el html de forma condicional, utilizando los comentarios condicionales con la instrucción IF. La desventaja de utlizar hacks es que complican las instrucciones del CSS, no se garantiza su funcionamiento para versiones más modernas de los navegadores y, en algunos casos, puede que no se valide correctamente según las normas de W3C. Más información sobre comentarios condicionales, filtros y hacks en librosweb.es.