Suscríbete a nuestro RSS Feed
Siempre repito lo mismo, y no me voy a cansar de comentar sobre los problemas que tenemos al ver nuestro diseño web en Internet Explorer, por lo general en su hermosa versión 6. Si les interesa ya he comentado sobre como corregir algunos errores.
Cuando estamos buscando un diseño líquido, es decir, que se adapte al tamaño de la ventana de nuestro navegador esto es un verdadero problema, pero por suerte tenemos la solución para esto.
En esta ocasión mostraré como lograr utilizar las propiedades CSS min y max (min-width, min-height, max-width y max-height) en Internet Explorer. De por sí este navegador no acepta min y max, así que deberemos aplicar un pequeño código javascript para lograr que funcione.
Utilicemos como ejemplo el diseño actual de Techtear, el mismo tiene un ancho de 950px, pero en su header y footer el ancho se adapta al ancho de la ventana. Si vemos el sitio en 800×600 vemos un scroll horizontal y en 1024×768 el header y el footer se “estiran” hasta el final de la ventana horizontalmente.
Esto se logra aplicando las siguiente propiedades al CSS, utilicemos como ejemplo el header:
#header {
max-width: 100%;
min-width: 950px;
}
Es decir, como mínimo va a tener 950px, y en el caso que la ventana sea mayor a 950px se extenderá en hasta el 100% de la misma. Esto funciona en la mayoría de los navegadores (Firefox, Opera, etc.) pero no en Internet Explorer. Para lograr este resultado en dicho navegador debemos aplicar lo siguiente:
width: expression((documentElement.clientWidth <950) ? "950px" : "100%" );
Aquí establecemos el tamaño que usaremos de parámetro, luego el min-width y por último el max-width. Esto se entendería así: si la ventana (o resolución) es menor a 950px de ancho, que aplique un ancho de 950px al header pero que si es más de 950px que le aplique 100%. Este código debemos aplicarlo junto al las especificaciones de tamaño anterior, por lo que nos quedaría finalizado de esta manera:
#header {
max-width: 100%;
min-width: 950px;
width: expression((documentElement.clientWidth <950) ? "950px" : "100%" );
}
Con esto solucionaremos uno de los problemas que frecuentan muchos diseños, que al hacer scroll horizontal el 800×600 mucho fondos de headers y footers se cortan. Un error que hasta importantes diseñadores tienen en sus diseños.
El código se puede utilizar de la misma manera para aplicar las propiedades min-height y max-height. Simplemente reemplazamos width por heigth.
Horacio Bella
Suscríbete a nuestro RSS Feed
Estuve probando esto en IE6 para windows y no dio resultados :S Y eso que le dejé sólo la línea de “width:”.
De todas formas, si no me equivoco, la evaluación de esa expresión se realiza sólo cuando se carga la página y no luego. Por lo tanto, si se redimensiona la ventana se verá mal de todas formas :(
Para IE viene un archivo en Javascript llamado IE7 que implementa del lado del cliente una serie de fixes para esto. Además arregla las transparencias de los PNGs y un par de cosillas más. Tiene dos desventajas: se debe implementar del lado del sitio web y al ser javascript hace que ciertas acciones sean más “lentas” del lado del cliente (dependiendo de la potencia de la PC). Pero creo que es un precio bajo a pagar por aquellos que usan IE :P
IE7 se puede conseguir en: http://dean.edwards.name/IE7/
Este blog por ejemplo lo utiliza de la manera que se muestra en el ejemplo. Parece funcionar.
Me estoy enfrentando a este problema por primera vez, y he estado mirando las posibles soluciones por ahí, y he llegado a una que parece más simple que esta. Teneis el artículo en español en
http://511.dabomb.com.ar/2006/01/max-width-min-width-internet-explorer/
la versión origina aquí:
http://www.svendtofte.com/code/max_width_in_ie/
Gracias de todas formas.
Saludos
Pues funciona perfectamente esta solución sea cual sea el momento en el que se redimensione el navegador, además, a mi personalmente me parece la más sencilla. Podéis ver un ejemplo en http://www.um.es/ice/
Hola Horacio, muchas gracias por tu aportación, me ha servido de mucho para el “gran” IE6.
En el proyecto que estaba haciendo tenía la necesidad de ajustar el ancho máximo y el mínimo, es decir, que si el ancho era mayor de 1024, el width debía ser 1024px, y si era menor que 990, de 990px.
Lo he solucionado de la siguiente manera (seguro que lo sabeis, pero por si acaso lo pongo):
width: expression( (documentElement.clientWidth 1024) ? “1024px” : “auto” );
En el “sino” de la evaluación, en lugar de poner un tamaño he puesto otra evaluación para comprobar el tamaño máximo y dependiendo del tamaño máximo devuelvo un valor u otro.
Saludos.