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.