Ayuda, Mi sitio se ve mal en firefox - XHTML+CSS

Siguiendo en la línea de los artículos y/o tutoriales que responden las dudas que ya se ponen repetitivas en los foros, llega esta entrega de "Rescatando al Modelo de Caja"... que en realidad solo intenta explicar el clásico problema de "ayuda!, mi diseño se ve mal en firefox".

Partamos por el principio

Lo primero es aclarar un punto.

NO! Tu diseño no se ve mal en Firefox. Tu diseño se ve bien en Firefox. Fuiste tú quien lo diseñó e implementó así de mal.

Existen los estándares ¿los conoces?. Digamos que son normas que todos debiesen seguir para que ciertas cosas se vean igual en distintas partes. Un estándar podrían ser las medidas y formatos de los CDs... imagínate que en cada país los CDs tuvieran distinto tamaño... o peor, distinta forma!!!... no sevirían para mucho. Pues algo análogo sucede con los estándares web (vaya a leer a www.w3c.org para muchos más detalles). Y aquí está el problema. No, el problema no son los estándares en si, el problema es que existen quienes no siguen esos estándares... ¿adivinaste quién?... si... nuestro querido amiguito Microsoft Internet Explorer. Para ser justos, las versiones menores a la 7 tienen serios problemas con los estándares, sobretodo con lo que se conoce como "Modelo de Caja" (ver esquema de wikipedia: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug).

Comentarios Condicionales

Existen algunas líneas algo desconocidas en el mundo HTML que permiten mostrar las etiquetas solo bajo ciertas condiciones. Y tienen un nombre muy original: Comentarios Condicionales.

Por ejemplo:

<!--[if IE]>
<p>Que pena, usas explorer</p>
<![endif]-->

<!--[if !IE]>-->
<p>Gracias por no utilizar una bosta para navegar por mi web.</p>
<!--<![endif]-->

Vemos que entre corchetes se pone la condición que hace mostrar o no el contenido encerrado en los comentarios condicionales. Tenemos varias opciones que preceden al nombre y versión de browser al que queremos afectar, como:

!
Operador Not. Indica que NO se está usando la versión señalada

lt
Operador lees than (menor que). Para detectar una versión inferior a la señalada.

lte
Operador less than equal (menor que o igual a). Para detectar una version inferior o igual a la señalada.

gt
Operador greater than (mayor que). Para detectar versión superiores a la señalada.

gte
Operador greater than equal (mayor que o igual a). Para detectar version superiores o iguales a la señalada

Pero vamos a la práctica

Desde mi punto de vista (y así es como trabajo), lo mejor es seguir los siguientes pasos:

1) Diseñar pensando en firefox. Previsualizar en firefox. Una vez todo listo para firefox, seguimos con los demás.
2) Miremos en otro navegador decente como Safari, y quizás corrijamos un par de pixeles por acá y otro par de pixeles por allá para que el diseño quede prácticamente igual en ambos.
3) Mirar cómo se ve el diseño en Microsoft Internet Explorer 7, que si bien sigue siendo bastante bestia, ya se ha domesticado bastante, y en lineas generales (un 99% diría yo) se comporta igual que firefox. Si es necesario, aplicamos una corrección a los estilos con una hija solo para la versión 7.
4) Acá hay que respirar hondo, prender un cigarro, un cortito de ron y miramos como se ve el diseño en microsoft internet explorer 6. Luego de la impresión, la depresión y todo lo demás, aplicamos una hoja de estilos para corregir todo esto.
5) Y chan!!!!!... ya tenemos una web que se ve bien, o al menos consistente en practicamente todos los navegadores.

Pero ¿cómo hacemos esas hojas de estilo para coregir

Acá viene la palta. Como se hacen estas correcciones: Simplemente en el head del documento ponemos

<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
<!--[if IE 7]>
<link href="estilo_ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 7]>
<link href="estilo_ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Entonces, en estilo.css tenemos los estilos para fireox, safari y todos los browsers decentes.

Luego estilo_ie7.css se usa solo si es necesario para corregir algo en la versión 7 (por experiencia, los problemas que me da es la posición de botones al lado de elementos de formulario, por lo que esta hoja tiene posiciones relativas para corregir eso).

Y finalmente estilo_ie.css que tiene tooodos los estilos necesarios para corregir el bodrio de explorer 6 e inferiores (usualmente lleno de margin, padding, width, text-indent y similares).

Y eso es todo. Es bastante simple. Es cosa de probar una vez, con todos los browsers abiertos, e ir actualizando para ver cómo se reflejan los cambios en un browser y no en otro según corresponda.

Datos útiles

Muchas veriones de explorer: Para los amiguitos con windows, basta con tener instalado explorer 7 y luego descargar desde http://tredosoft.com/Multiple_IE un programa llamado "Multiple IE" que permite instalar sin problemas todas las versiones antiguas de explorer. Ideal para probar. Yo lo uso y no he tenido problemas.

¿Dudas con XHTML y CSS?: Hay un tutorial de BenKo muy bueno, didáctico y ameno para quienes empiezan en el mundo xhtml+css. Lo tengo colgado en mi web www.lesterfibla.com/tutoriales.php

www.lesterfibla.com/pro