Estás mirando la versión 3 de mi sitio web, para ver la última versión por favor anda a juque.cl

juque

Juan Pablo Aqueveque: Ingeniero de Sistemas, Diseñador y Desarrollador Web que reside en Temuco, Chile.

min-width,min-height y max-width,max-height en IE6

Publicado por Juan Pablo el 2.Nov.2008 | Comentarios (0)

Actualmente estoy trabajando en un proyecto cuya hoja de estilo (CSS) debe renderizar igual en IE6, IE7 y Firefox, es decir, full soporte para los navegadores más populares. Es un requerimiento del cliente, así que no puedo esquivar a IE6, el más horrible de todos los navegadores.

Gracias al cielo, IE 7 no me da tantos dolores de cabeza, aunque igualmente malo a la hora de respetar estándares. El que me hace sufrir es IE6, y mi problema con él (y el que motiva esta entrada) es que no soporta las propiedades: max-width, max-height, min-width y min-height, a diferencia de IE7, que sí lo hace.

Irónicamente, para solucionar este problema vamos a recurrir a las Propiedades Dinámicas que Microsoft nos entrega a los desarrolladores, ¿ven que tan malos no son?.

Javascript vía CSS

P: ¿Cómo hacemos para que min-width,min-height y max-width, max-height sean soportados en IE6?.

R: Usando Javascript.

elemento {atributo:expression([código javascript]) } 

Ejemplo:

#contenido {width:expression(400 + "px");}

Ejemplo de la vida real

Perfecto, ahora usaremos esto para solucionar nuestro problema, el elemento contenido debe tener una altura mínima de 800px; entonces:

#contenido {min-height:800px} 

Pero IE6 (IE7 lo leerá perfectamente) no tiene idea de lo que acabo de poner en nuestro CSS, pero entenderá si usamos esas mágicas Propiedades Dinámicas, aquí vamos:

#contenido {height: expression(this.scrollHeight < 800 ? "800px" : "auto"); } 

Poniendo todo junto

Obviamente, debemos aislar las reglas de estilo para que sea leídas exclusivamente por IE6, algunos usan el bug de la estrella y el elemento html otros usan los comentarios condicionales ; en mi caso uso el primero, por lo tanto el código quedará de la siguiente forma:

* html #contenido {height:expression(this.scrollHeight < 800 ? "800px":"auto");}

Recapitulando

Entonces, para ancho y alto mínimos tenemos:

* html #contenido {width:expression(document.body.clientWidth < 800 ? "800px":"auto");} 
* html #contenido {height:expression(this.scrollHeight < 800 ? "800px":"auto");}

Y para ancho y alto máximos tenemos:

* html #contenido {width:expression(document.body.clientWidth > 800 ? "800px":"auto");} 
* html #contenido {height:expression(this.scrollHeight > 800 ? "800px":"auto");}

Enlace Permanente, Comentarios (0), Publicada en: CSS