Cómo editar en CSS para Firefox e IE

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.


Comentarios

4 respuestas a «Cómo editar en CSS para Firefox e IE»

  1. Pues hablando un poco de todo y ya que la clase esta siendo un poco coñazo, la entropía ya la conocía…

    Nosotros utilizábamos unos tutoriales bastante interesantes, donde puedes aprender un poco de todo, html, xhtml, css, e incluso PHP si no recuerdo mal. La página web es esta:
    http://www.w3schools.com/

    Espero que la disfrutéis.

  2. Pues a mí me rula y es válido para el W3C. Pero creo que también es importante definir los paddings y entonces se equilibra todo, ¿eso lo has probado?. La verdad… llevo como (espera que piense) mmm 9 años haciendo páginas web y posicionando con CSS debo llevar 5 o así y a pesar de eso ¡¡¡NO APRENDO!!! 😀 Porque siempre que pienso «ah claro, esto es así por este motivo» luego siempre llega otra cosa nueva que te rompe los esquemas!!!! Pero para mí esto es como jugar al Tetris… me encanta darle vueltas para que encaje todo, para mejorarlo y que quede bien en todos los navegadores.

    Si te interesa… las CSS de la última web que he hecho están validadas. Sólo he puesto un filter (y porque ha sido el ultimísimo recurso). Lo puedes ver aquí http://www.cmcconsulting.es y abajo a la derecha hay un icono de validación de CSS.

    Ya sé que ver las CSS que hace otro es un rollo, porque es como un jeroglífico. Pero te lo digo porque es taaaaan coñazo lo de los filters que sólo de pensar en lo que debes estar pasando me echo a temblar 🙂

    Y ya me callo, que estoy acaparando tu blog 🙂

  3. @Pi: Jar!! ¿¿Y ese truqui valida en el W3C?? Porque resultaría mucho más sencillo. Yo de todas formas sí casco siempre los márgenes a 0 en el inicio del CSS, pero luego al poner uno cualquiera hay que hacerle el apaño al IE…

  4. ¡Anda! Yo también me dedico a esto y hace bastante tiempo que intento no usar estos «CSS filters» (http://centricle.com/ref/css/filters/ aquí los tienes todos por si acaso). No lo hago por dos motivos: 1) el coñazo que supone, y 2) (más importante) la mayoría de ellos son detectados por el CSS validator del W3C (http://jigsaw.w3.org/css-validator/) y no te dan por válidas las CSS.

    Suelo comenzar las CSS con un:

    html, body {
    margin : 0;
    padding : 0;
    }

    y normalmente eso funciona para resetear a cero los márgenes y rellenos en todos los navegadores.

    Hay gente que incluso lo hace con:

    * {
    margin : 0;
    padding : 0;
    }

    aunque esto hace que todos los elementos vean su margin y padding puesto a cero y luego lo tienes que redefinir para todos ellos (como listas, blockquotes y cosas así).

    ¡¡Mucha suerte con la página que estés haciendo!!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *