El otro día estuve la mayor parte del tiempo en el trabajo luchando contra la soberbia y prácticas monopolísticas de Microsoft, que sumadas a la ignorancia de la mayor parte de los usuarios de Internet sobre cómo funcionan los navegadores hace que siga siendo necesario programar un página Web para que se vea en el maldito Internet Explorer 6. Tal es la malignidad el IE6 que melonian me lo presentó una vez como IE 666, y en un manual estupendo aparece como Quién-tu-sabes y sobrenombres por el estilo. Por cierto, a Melonian lo he recomendado muchas veces, pero este manual me lo encontré de chiripa y es una delicia. Incluso si te importa un carajo cómo pasar de HTML a XHTML, a poco friki que seas te va a encantar por cómo está escrito, las citas y los ejemplos que usa. Yo me reí un montón, y además me fue útil. Así que apoyemos a la gente chachi y dejemos el enlace a este manual escrito por BenKo y que podéis descargar aquí.
A lo que iba: IE6 merece la muerte. Como alguno sabrá, a la hora de diseñar en Internet y que la página se vea bien, se utilizan los estándares que marca el W3C. De hecho no sólo marca los estándares, sino que tiene herramientas gratuitas para que compruebes si los códigos de tus páginas los cumplen. Es decir, que está todo muy clarito y sencillo para todos, de forma que si escribo en un código «esta foto va aquí a esta distancia de este texto», se vea igual en todos los navegadores.
¿En todos? No, un pequeño mamoncete llamado Microsoft se pasa por el forro los estándares internacionales. No resulta sorprendente cuando ya se pasa por el forro la legalidad de medio mundo, pero no por ello joroba menos al diseñador que se tiene que pasar horas arreglando el estropicio de los colegas de Bill y, aunque éste no lo sepa, joroba mucho más al usuario final de Internet (que no sabe que de vez en cuando tiene que actualizar el Internet Explorer) que de repente se encuentra las páginas hechas un desastre.
En cualquier caso, los frikis somos más, aunque muchísimo más pobres. Así que brujuleando por Internet yo encontré el blog de La Brujula Verde. Vamos, específicamente encontré su entrada con el truqui del almendruqui (lo que los muy frikis llamamos «hack») para que una página Web se vea bien en Firefox (e imagino que se aplica a todos los navegadores que cumplen los estándares del W3C), Internet Explorer 7 (también llamado IE7, que aunque mejor que el IE6 sigue yendo a la bola de Bill) y en Internet Explorer 6.
Ojo, que estamos hablando sólo de diseñar con CSS y no con tablas, pero yendo al grano la cosa es escribir tu código para el estándar W3C:
#MyDiv {margin: 10px 10px 10px 10px;}
Entonces te miras la página en Internet Explorer 7, ves lo que falla y lo corriges, y lo que haces es hacer que esa corrección sólo afecte a este navegador, tal que así:
/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;}
Y por último te toca bajarte los pantalones y, aunque te duela, hacer lo mismo para Internet Explorer 6, así:
/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}
Así que en tu hoja de estilos CSS tendrás esto:
#MyDiv {margin: 10px 10px 10px 10px;}
/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;}
/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}
Y cuando la gente visite la página con Firefox, actuará el primero; cuando lo haga con IE7 el segundo y cuando lo haga con IE6 el tercero. Es un coñazo como la copa de un pino, porque tienes que ir comprobando en los tres navegadores y te acaba quedando un CSS larguísimo, pero con este hack consigues que tu página se vea bien en los tres y, de regalo, el CSS sigue cumpliendo el estándar W3C.
Oviamente lo de “IE6 only” Es un comentario que pones para aclararte las cosas, y no pasa nada si lo quitas. También es bueno saber que, en el hack, sólo tienes que escribir las cosas que cambian de la etiqueta. Es decir, si en el código estándar tienes tres cosas (márgenes, fuentes y color de letra, por ejemplo) pero sólo quieres cambiar una de ellas (los márgenes, que es lo que da por saco con más ahínco), sólo tienes que reescribir ese parámetro. Por ejemplo, aquí sólo tocamos los márgenes, y lo demás se sigue aplicando:
#sidebar {
width: 150px;
height:100%;
float:left;
margin-left: 35px;
margin-top: 20px;
text-align:center;
}
/* IE6 Only */
* html #sidebar {
margin-left: 17px;
margin-top: 10px;
}
Hala, espero haber sido de ayuda a los pequeñuelos que se encuentran con este jaleo por primera vez.
Deja una respuesta