El otro día me enfrenté a un diseño en photoshop que debía convertir a css. El diseño tenía el siguiente aspecto.

En el se puede apreciar un degradado de fondo fácil de implementar con una fina tira repetida en el eje x. El diseño tiene dos columnas que se deben poder llenar de contenido y alargarse verticalmente prolongando el fondo que tienen debajo. Hasta ahí todo perfecto. Genero un esquema como este:

Con esta hoja de estilo:

El problema es una imagen que proyecta una sombra sobre el fondo. No puedo simular la sombra con un png transparente porque Explorer 6.0 no acepta los pngs con transparencias. Tampoco puedo usar un gif porque no tiene la suficiente calidad. Finalmente opto por situar un elemento sin contenido exclusivamente para que contenga el fondo. Recorto la imagen de forma que los bordes queden bien situados con respecto al degradado y coloco una div del tamaño de la imagen generada de forma que el nuevo esquema tiene el siguiente aspecto:

<div id=”cuerpo”> 

<div id=”fondo Superior”>

<div id=”izquierda”></div>

<div id=”derecha”></div>

            </div><div id=”pie”></div></div>

Y el código CSS del nuevo elemento:

Se visualiza perfectamente en Firefox y en Explorer 6.0, pero al visualizarlo en Explorer 7.0 cuando los divs “izquierda” o “derecha” se llenan de contenido el fondo del div “cuerpo” no se prolonga hacia abajo es más, pasa por debajo del div “pie”. Como se puede ver aquí, en un boceto del montaje:

Después de mucho comerme la cabeza, la solución la encuentro flotando el elemento:

Lo que soluciona el problema. No me había encontrado aún con diseños que se visualizaran correctamente en Firefox y Explorer 6.0 pero no en Explorer 7.0.

El modelo de caja estándar y el modelo de caja IE

Existen diferencias entre el modelo de caja estándar y el modelo de caja de Internet Explorer.

Conviene conocerlas porque son fuente de muchos quebraderos y de problemas importantes en los diseños: Vamos a verlo con un ejemplo, la explicación está inspirada en un libro de la editorial Anaya Multimedia. El libro se llama CSS y los autores son Andy Budd, Cameron Bull y Simon Collison. Voy a utilizar ese mismo ejemplo para explicarlo, pero os recomiendo que si queréis aprender css entendiendo los conceptos desde el principio lo busquéis. Bien, partamos del siguiente código:

Si implementamos este código CSS y visualizamos el resultado con un Navegador que use el modelo de caja estándar, el resultado será el siguiente:

El parámetro width que hemos definido lo respeta, y afecta al área de contenido. A este valor se le suman los bordes y márgenes y da lugar a un ancho total de 100px; Pero veamos lo que ocurre con el modelo de caja de Internet Explorer: Explorer nos daría el siguiente resultado para el mismo código:

La diferencia la encontramos en el ancho total (pasa a ser 90 px) y en el ancho del área de contenido (pasa a ser de 60px). A diferencia del modelo anterior aquí no respeta el valor del parámetro width. ¿Porqué? Porque considera los 5px de relleno de cada lado como parte del ancho de 70 píxels del área de contenido. Aunque existen diferentes soluciones, para evitar las diferencias de visualización, yo recomendaría (y así lo expone el libro) no añadir nunca relleno a un elemento con un ancho definido. En su lugar hay que añadir relleno o márgenes al padre o al hijo del elemento.