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.
Gracias por la solución. Si que la necesitaba xd
Gracias, me ayudó bastante lo que expusiste acá.
El truco perfecto, ya se me visualizan correctamente las paginas con menús.
Excelente ayuda. Muy agradecida
Ya hay un Hotfix que arregla esto y alguna otra cosilla.
http://support.microsoft.com/kb/967535/
Muchas gracias por compartirnos tus conocimientos
Oigan muchachos a mi no me funcionan 🙁
en mi estilos pongo eso del z-index
luego voy al menu de dynamicmenustyle y le agrego el cssclss y nada por que ah ?
Amigos, a mi tampoco me funciona… tiene que ver algo con la confirguracion del IE8.
la solución lo he puesto en una hoja de stilo y lo invoco y nada
Gracias tio esto es una pasada, es justo lo que he andaba buscando.
Excelente solucion, este tipo de ayudas son las que merecen ser linkeadas.
Gracias
Les cuento algo a los que no les ha funcionado a ver si les sirve.
Yo primero cree el estilo en la hoja de estilos y luego lo referencie en el control y no me funciono.
Luego lo que hice fue crear el estilo directamente en la página donde esta el control como lo muestra el ejemplo, luego de el titulo de la página y luego lo referencie en el control y me funciono perfecto.
Gracias al que publico este articulo.
Excelente lo que andaba buscando ….te pasaste 🙂
Fué muy útil, sin esto no se que hubiera hecho pues ni idea por donde estaba el asunto. Gracias por haberlo compartido tan explicitamente.
Muchas gracias. No nada como saber de que se habla.
EXCELENTE APORTE.. FUE DE GRAN AYUDA.!!
Excelente, por fin esta la solucion a eso…
Saludos.
Gracias, pero me funciono para IE8 pero pars que funcione en IE7 que puede ser, gracias.
saludos.
excelente solucion!!!… saludos
gracias por tu aporte , me sirvio mucho precisamente no me salía eso…
Excelente!!! Muy buen aporte …. mil gracias!!!
Muchas gracias por tu post, no sabes el problema que me has solucionado!
Saludos!
GRAN APORTE…ME AYUDO MUCHISIMO…DE VERDAD MUCHAS GRACIAS
Excelente y muy preciso, Graciasss
Gracias por la solucion me ayudo mucho a hacer un menu multi-idioma, ahora solo me falta poder cada control de los forms,, Saludos Master
Hola, muy bueno, pero se me presento otro problema al desplegar las opciones del submenu el texto del mismo se sale de los limites del menu, como pordria solucionar este iconveniente
genial muchas gracias
execelente esta ayuda me sirvio bastante…
no se ven las imagenes de google, ni los videos en yutube, el contenido del face ni nada D: ayudaa! D:
Muy bueno el aporte, gracias!
Muchas gracias, muy bueno el post, muy detallado
Muy bueno lo que comentastes se agradece
Muchas gracias…
Excepcional amigo.
Muchas gracias por la ayuda, ya me estaba volviendo loco con este problema.
Nuevamente gracias.
Muchas gracias,
me solucionaste el problema
Muchas gracias.. la solucion funciona 100%
Gracias, excelente ayuda
Muchas gracias por tu ayuda, solucione ese problema que me tenía complicado. Saludos cordiales.
Gracias, Gracias, Gracias…. después de tantas horas buscándole 🙂 Saludos.
EXCELENTE MIL GRACIAS !!!!
Gracias, muy buen ejemplo, att Geek de rango Mayor
Excelente solución, funciona 100%. Con esto me ahorré varios llamados telefónicos.
Buenisimo excelente solucioon mil gracias 😉
Excelente!! solucionó mi problema en un dos por tres.
Excelente!! solucionó mi problema.
Prestar atención a todos los pasos, y funciona perfectamente.!!!!
GRACIAS!!!!!!!!!!!!!!!!!!…. solucion en un minuto….
Gracias compañero, la verdad es que me habeis salvado la vida pibe pues hobre sos maldito
Hola,
Hago una consulta adicional. No soy programador, solo usuario.
Tengo problemas para acceder a la información de un sitio web que utilizo habitualmente. Desde mi notebook accedo sin problemas pero desde otra máquina que suelo utilizar no accedo a ver los contenidos de ciertas consultas.
La web tiene páginas .aspx.
Cuando requiero la información la máquina como que piensa y de repente queda quieta y al pie se alcanza a leer LISTO.
Alguien sabe como puedo solucionarlo?
gracias.
Zelmar
Gracías, realmente me funcionó.
Saludos
Genial, me saco de un apuro!!!
Excelente Post. Muchas gracias por la ayuda.