Mi menú ASP.NET no se ve en Internet Explorer 8: Solución rápida
Internet Explorer 8 ofrece una compatibilidad con los estándares de la W3C sin precedentes en los navegadores de Microsoft (incluso ha pasado el ACID2 test). Se trata de una gran noticia para los programadores Web ya que cuanto más estándar sean todos los navegadores menos esfuerzos para desarrollar interfaces pasaremos pues no hay que estar pegándonos para conseguir que funcione en todos ellos.
Por desgracia esta compatibilidad estricta hará que algunos sitios Web que funcionaban perfectamente en la versión anterior (la 7.0) de IE dejen de hacerlo ahora en la nueva versión, dado el modo diferente de tratar ciertos elementos (sobre todo CSS) que éste tenía. Esto es algo de lo que Microsoft es muy consciente y por eso ha incluído un modo de compatibilidad con IE7 en la última versión. Así, si entramos en una página que se veía perfectamente con IE7 pero ahora no vemos correctamente sólo tenemos que pulsar el botón a tal efecto colocado al lado de la barra de direcciones del navegador para conseguir que la página se renderice exactamente igual que se hacía antes, y problema resuelto:
Esto está bien cuando somos nosotros los usuarios, pero siendo programadores no es algo en lo que debamos confiar mucho. Quiero decir que va a ser mucho esperar que los usuarios de nuestras aplicaciones utilicen esta característica si nuestro sitio no se visualiza correctamente, ya que la mayoría ni siquiera sabrá que existe. Así que debemos ser proactivos y tratar de solucionar esos posibles problemas de visualización y no confiar en que el usuario pondrá la vista de compatibilidad.
La mayor parte de los controles Web que vienen con ASP.NET funcionan sin problemas con Internet Explorer 8. Pero hay uno que es especialmente problemático y que no funcionará tal y como viene de fábrica: el control Menu. Este control sirve para mostrar menús desplegables para navegar por nuestra aplicación.
Cuando añadimos un menú a un formulario Web y lo visualizamos con Internet Explorer 8 lo que pasará es que la parte desplegable del mismo se verá en blanco completamente, así:
Upps!, cosa mala.
¿Cómo podemos solucionarlo?
Obviamente una forma de conseguirlo es forzar que el navegador se comporte como lo hacía Internet Explorer activando desde nuestra página el modo de compatibilidad. Se puede hacer y seguramente lo explicaré en un próximo post, pero eso no deja de ser un "apaño" que deberíamos evitar pues no estamos solucionando el problema, sólo posponiéndolo.
Lo que tenemos que hacer es solucionarlo definitvamente y ello es más fácil de lo que parece. Si conocemos donde está el problema solucionarlo es inmediato. Según reconoce el propio equipo de ASP.NET el problema viene de que asumieron incorrectamente que el valor por defecto del estilo z-index (para posicionamiento vertical de los elementos en la página) de las capas que forman el menú desplegable era un valor concreto, cuando en realidad, según el estándar, este valor por defecto es "auto". El resultado es que IE8 sigue estrictamente el estándar y por lo tanto al no tener un z-index asignado la capa no se muestra.
Entonces, sabiendo esto, la solución es bien sencilla: apliquémosle un z-index a esa capa.
Asi, lo único que hay que hacer es crear un nuevo estilo en la página tal que así:
Como vemos lo único que hacemos es crear un estilo que asigna un valor de z-index. Cualquier valor mayor de 0 será suficiente, pero mejor ponerlo alto para asegurarnos de que las capas del menú pasan por encima de los demás elementos y que así siempre estarán visibles cuando se desplieguen.
Perfecto. Ahora sólo queda asignarle este estilo al control, para lo cual usaremos la propiedad CssStyle de su elemento DynamicMenuStyle:
A partir de ese momento el menú aplicará este estilo adicional a las capas de elementos adicionales (junto con cualquier otro que tuviésemos asignado para darle la estética deseada), y se verá perfectamente bajo IE8:
¡Listo!
Si queremos aplicárselo a todos los controles del mismo tipo podemos crear un archivo Tema de ASP.NET y definirlo dentro de un archivo .skin para reutilizarlo en todas las páginas.
Además, la gente de Microsoft ha sacado hace un mes unos parches para ASP.NET que solucionan, entre otros, este problema. Los podemos descargar desde aquí:
· Para Windows 2000, Windows XP y Windows Server 2003
· Para Windows Vista y Windows Server 2008
Aunque el título se refiere a parches para otras cosas más importantes, en ambos casos lleva incluida la solución al problema del que hablo en este post.
En un próximo post hablaré de cómo forzar el modo de compatibilidad en toda nuestra aplicación o en páginas concretas de la misma.
Espero que te resulte útil.
