min-width y max-width elastico en IE6

[javi_bus]

Buenas,

Estoy diseñando una web elástica (usando como unidad "em") y semilíquida. Es decir, algunas zonas de cada página tienen medidas "elásticas" especificadas con valores "em" y mientras que otras partes crecen para ocupar el espacio disponible en la ventana del usuario. No sé si me explico. Y, para evitar los típicos problemas de los diseños líquidos con resoluciones muy bajas o muy altas, uso los valores min-width y max-width para establecer hasta donde puede crecer/decrecer.

Hasta ahí bien. El problema está en que me vendría muy bien para que el diseño se comporte realmente de forma elástica el poder definir los valores máximos y mínimos usando este tipo de medidas (por ejemplo, "min-width:65em" y "max-width:75em").

Esto funciona bien con los navegadores que soportan min-width y max-width como son Firefox, IE7, etc. El problema lo tengo con IE6. Este navegador no reconoce ni min-width ni max-width. Se puede subsanar usando este hack:

Código HTML:

	width:expression(documentElement.clientWidth>1200?"1200px":documentElement.clientWidth<960?"960px":"auto");

Pero como véis se usa como medida los pixels. La pregunta después de todo este rollo es:

¿Qué puedo hacer para usar la unidad "em" en lugar de "px" en el código que os acabo de mostrar? O si es con otro código diferente da lo mismo. Lo importante es poder definir los valores mínimo y máximo usando la unidad "em" con la idea de que el diseño sea líquido y elástico tanto en Firefox y demás como en IE6.

¿Se puede hacer?

Un saludo

[javi_bus]

Solucionado:

Teniendo en cuenta que 1em = 16 pixels = 12 pt (en este caso 1200px = 75em = 100pt y 960px = 60em = 80pt) y que "document.body.currentStyle.fontSize" da el tamaño global del texto en "pt", para esta expresión en pixels:

Código HTML:

width:expression(documentElement.clientWidth>1200?"1200px":
    documentElement.clientWidth<960?"960px":"auto");

el equivalente en formato elástico es:

Código HTML:

expression(documentElement.clientWidth>75*16/12*parseInt(document.body.currentStyle.fontSize)?"75em":
    documentElement.clientWidth<60*16/12*parseInt(document.body.currentStyle.fontSize)?"60em":"auto");

De esta forma, cuando el navegante aumente o decrezca el tamaño de letra, parseInt(document.body.currentStyle.fontSize) retornará este nuevo valor bajando o subiendo el tamaño máximo y/o mínimo que especificamos para el ancho de la página.

Importante: no se debe especificar el tamaño de la fuente en el body o de lo contrario esta expresión deja de funcionar bien. Si es necesario, se puede crear un div contenedor de toda la página y se especifica ahí el tamaño de letra global que se desee.