Internet Explorer 7 y las listas horizontales
En estos días de inactividad en el blog he estado preparando la maqueta de Accesibles.org y me he encontrado con un problema que no está demasiado documentado y con el que, tal vez, se puedan encontrar ustedes en algún momento.
El diseño de Accesibles.org está pensado para que sea elástico, es decir, todo crece al aumentar el tamaño tipográfico (para entendernos, al hacer zoom), por tanto, no es fijo en el sentido estricto y tampoco depende del área visible ni de la resolución de pantalla (diseño líquido).
El diseño elástico (propuesto por Patrick Griffiths hace algunos años) plantea interesantes ventajas de accesibilidad, por ejemplo para para las personas con baja visión, pero también requiere que el desarrollador tenga en cuenta cómo van a crecer (o decrecer) todos los elementos de la página sin que se pierda ni legibilidad ni diseño.
Problemas con el zoom de Internet Explorer 7
Como ya sabrán, Internet Explorer 7 tiene una nueva utilidad (no tan nueva en otros navegadores) para aumentar el tamaño de las páginas. Al hacer zoom todo crece o disminuye como se espera con la salvedad de los elementos de una lista mostrados en línea (inline), el típico menú horizontal realizado con listas. ¿Qué es lo que ocurre? Simplemente que los elementos de la lista horizontal pierden su margen (margin) o relleno (padding), con lo que se muestran juntos los unos de los otros, tanto al aumentar como al disminuir el tamaño de la página. He podido comprobar que el error no se produce si la lista está "flotada" (float).
Vean algunos ejemplos:
- En la versión de desarrollo de accesibles.org
- En la navegación por pestañas diseñada por Eric Meyer
- En la navegación secundaria de Listamatic (en esta página podemos probar muchas otras listas de navegación horizontal con IE7)
La posible solución
Volviendo al caso concreto de Accesibles.org, obviamente, si el marcado es correcto, los estilos también y se muestra y crece adecuadamente en IE6, Firefox y Opera, parece que el problema está en la forma de hacer zoom de IE7, por lo que hay que aislar el problema sólo para este navegador, creando, por ejemplo, un estilo específico valiéndonos de los comentarios condicionales que nos ofrece Microsoft:
<!-- [if IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen"
<![endif] -->En la hoja de estilo usaremos las siguientes reglas para los elementos de la lista, como comentaba al principio, esto no está demasiado documentado en la Red pero parece que funciona (al menos en mis pruebas):
ul li {zoom:100%;} /* regla de estilo propietaria de Microsoft */
ul li a {display:inline-block;}
Con esta solución las listas horizontales crecerán y decrecerán correctamente al usar el zoom en Internet Explorer 7.
Desarrollar con Internet Explorer 7
Chris Wilson nos comentaba en Fundamentos Web 2006 que Internet Explorer 7 no podía "romper la Web" haciendo referencia a la dificultad de innovar y a la vez mantener la compatibilidad hacia atrás con versiones anteriores de IExplorer, parece que, en este caso, una nueva funcionalidad si que está rompiendo la Web.
Mi consejo es que si quieren desarrollar con IE7 consigan una versión autónoma (standalone) del mismo, de tal forma que mantengan la versión 6 operativa (aún la mayoría de usuarios usan esta versión). En TredoSoft han conseguido realizar un instalador autónomo de IE7, algunas funciones del nuevo navegador se pierden pero para nuestras pruebas es más que suficiente.
Para concluir, IE7 tiene mejoras pero quedan aún muchas cosas que pulir del nuevo navegador de Microsoft, Roger Johansson selecciona diez cosas que deberían corregir en futuras revisiones.
Espero que todo este rollo les sea de utilidad, en mi caso particular ha sido efectivo, si encuentran otros métodos o simplemente quieren sugerir algo no duden en hacer sus comentarios.