Diseño CSS para IE6, IE7 y Firefox

Este es un pequeño y extremadamente útil "truco" que nos soluciona el común problema que tenemos al diseñar una web con CSS que debe ser compatible para Internet Explorer 6, Internet Explorer 7 y por supuesto Firefox.

Básicamente para Firefox no existe ningún problema pero IE6 e IE7 suelen interpretar las hojas de estilo en cascada de diferentes maneras, lo que puede "literalmente" hechar por la borda todo un diseño realizado para Firefox únicamente, bueno, no se procupen demasiado, la solución que encontré buscando en la web es muy simple, y consta en crear diferentes parámetros css para cada navegador, entonces el código que se interprete será el que corresponda al navegador que estemos usando,

Para IE6 debes colocar: * Html (antes de cada etiqueta)
Para IE7 debes colocar: *:first-child+html (antes de cada etiqueta)

Por ejemplo, si creas un Div llamado "contenido" debes colocarlo así:

Para Firefox:

#contenido{
position:absolute;
left:217px;
top:250px;
width:749px;
height:2000px;
z-index:1;

Para IE6:

* html #contenido{
position:absolute;
left:217px;
top:250px;
width:749px;
height:2100px;
z-index:1;

Para IE7:

*:first-child+html #contenido{
position:absolute;
left:217px;
top:250px;
width:749px;
height:2200px;
z-index:1;

Como ven, el alto (height) de nuestro Div, tiene un tamaño distinto para cada navegador, Firefox (height:2000), IE6 (height:2100) e IE7 (height:2200), esto quiere decir que si vemos la pagina web con firefox, nos mostrará el div "contenido" con un alto de 2000px, si lo hacemos con IE6 veremos el div "contenido" con un alto de 2100px, y con IE7 un alto de 2200px.

Esto puede utilizarse para cualquier div o etiqueta en nuestro código CSS, les aseguro que esta técnica les facilitará muchísimo el trabajo de diseñar para distintos navegadores, y seguramente les solucionará problemas (si todavia no la conocían) con cualquier diseño que tengan.

un saludo, y buena suerte.