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 800x600 vemos un scroll horizontal y en 1024x768 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 800x600 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.