DIVs emergentes - compatibilidad con IE8

[gmonterog]

PERDON!! Me he equivocado de foro, esto debería ir en CSS. Lo vuelvo colgar ahí, no se como redirigirlo.

Disculpad las molestias.




Hola a todos:

He creado una página con algunos contenidos emergentes solo con CSS. Funciona muy bien y se ve muy vistoso con todos los navegadores modernos: Firefox, Chrome, IE9, Opera y Safari (al menos en versiones actualizadas).

El problema me ha surgido al probarlo en IE8, lo que por desgracia, significa todos los usuarios que aun tienen XP, que en el sector corporativo son muchos.

Os he preparado un ejemplo con el código lo más limpio posible al que podéis acceder en [URL="http://www.e-funciona.com/contenidos_emergentes"]www.e-funciona.com/contenidos_emergentes[/URL].

En principio he revisado las propiedades CSS empleadas y todas deberían ser compatibles con IE8, pero por algún motivo que no consigo averiguar, el comportamiento no es el esperado. De hecho no funciona.

No se si tiene que ver con los selectores empleados para activar :hover, con la superposición de capas (z-index, visibility, opacity) con el posicionamiento o con que. No consigo dar con ello.

Si alguien pudiera ayudarme a resolver este asunto le estaré muy agradecido. Caso contrario no me quedará más remedio que rediseñar el portal o al menos hacer un CSS especifico para IE8, y la verdad, no me gustaría.

Gracias a todos,

GMG

[djaevi]

Creo que claramente el problema de incompatibilidad lo tienes en
-moz-transition: all 2s;
-webkit-transition: all 2s;
Lo que te puedo recomendar es que hagas un script de javascript donde detectes que navegador usa el usuario y de ser viejo asignar el efecto mediante jquery, investiga los fade de jquery que te pueden dar el mismo resultado que la transicion que tienes en tu pagina

[gmonterog]

Hola djaevi:

El tema no tiene nada que ver con las transiciones. Aunque IE no las soporta, sencillamente las ignora. La transición solo afecta al modo en que se realiza un cambio de valor de una propiedad, pero no determina que ese cambio se lleve a cabo o no. No lo bloquean, si el navegador no soporta transiciones, el efecto se produce de forma brusca, pero se produce. En cualquier caso y por si las moscas, ya probé en su momento a anular esas líneas del CSS, pero como ya te he dicho, no tiene nada que ver.

Sigo indagando. Creo que el tema está relacionado en como interpreta IE8 el hecho de tener 3 divs superpuestos, las propiedades visibility y opacity y la pseudoclase :hover, pero la verdad es que no estoy seguro.

No tengo duda de que con JavaScript se pueda hacer lo mismo perfectamente, lo que pasa es que sencillamente no se absolutamente nada de JavaScript, por eso me voy apañando con CSS.

En cualquier caso, gracias por la info y que sepas que por supuesto que voy a investigar lo que me propones, aunque sea materia nueva para mí.

Saludos,

GMG.

Iniciado por djaevi

Creo que claramente el problema de incompatibilidad lo tienes en
-moz-transition: all 2s;
-webkit-transition: all 2s;
Lo que te puedo recomendar es que hagas un script de javascript donde detectes que navegador usa el usuario y de ser viejo asignar el efecto mediante jquery, investiga los fade de jquery que te pueden dar el mismo resultado que la transicion que tienes en tu pagina

[emprear]

tenés selectores que no son 100% reconocidos en ie8, los valores correctos para la propiedad visibility son hidden y visible, vi por ahi algunos "show"; (no sé si era netscape el que lo usaba)

Tenés decenas de ejemplos en la red para tabs, algunos con js/jquery y otros solo con css

No son tan difíciles de implementar
http://jquerytools.org/demos/tabs/index.html --> jquery

ó este solo con css
http://3.7designs.co/blog/cssdomtabs.html
realmente muy ingenioso

Si googleas por Pure Css menu tabs, tenés para entretenerte un rato largo

SAludos

[gmonterog]

Hola:

Lo del show ya lo vi y lo rectifique. En cuanto a los selectores es posible que algo de eso haya. Lo tengo que verificar.

Gracias por los enlaces. Cada vez que tengo un rato voy mirando ejemplos por aquí y por allá, así que un par de sitios mas donde documentarse vienen bien.

De todos modos, sigo investigando. A ver si consigo entender que es lo que falla.

Por cierto. Este mismo hilo esta abierto en el foro de CSS, como ya indique al principio. ¿Alguien sabe si se pueden juntar los dos hilos en un único foro?

Saludos.

GMG.

Iniciado por emprear

tenés selectores que no son 100% reconocidos en ie8, los valores correctos para la propiedad visibility son hidden y visible, vi por ahi algunos "show"; (no sé si era netscape el que lo usaba)

Tenés decenas de ejemplos en la red para tabs, algunos con js/jquery y otros solo con css

No son tan difíciles de implementar
[url]http://jquerytools.org/demos/tabs/index.html[/url] --> jquery

ó este solo con css
[url]http://3.7designs.co/blog/cssdomtabs.html[/url]
realmente muy ingenioso

Si googleas por Pure Css menu tabs, tenés para entretenerte un rato largo

SAludos

[gmonterog]

Para cerrar el tema copio el post original del foro de CSS.

Hola a todos otra vez:

Básicamente el problema es que tenía enlazado el script ie7-js, que en teoría sirve para corregir algunos problemas de compatibilidad con IE.

En la versión original de mi web lo he desactivado y ya funciona en IE8 (no se anteriores, pero esto ya me parece residual).

Comentar que finalmente he optado por trabajar con la propiedad opacity (y su correspondiente filtro para IE) y no con visibility o display. Esto se debe a que es la única que parece admitir transiciones (que como ya sabemos no funcionan en IE8, pero si en el resto de navegadores importantes).

Conclusión: no había problema de transiciones, no había problema de selectores pero, ojo a la hora de enlazar scripts de terceros, sobre todo para los que no sabemos como funcionan realmente. Puede que el resultado sea diferente al esperado o que, como en este caso, tenga efectos colaterales.

Por último, gracias al foro y en especial a IsaBelM (también a djaevi y emprear que participaron en este mismo hilo pero en el foro de html) por dedicar su tiempo a los que menos sabemos. Todos me dieron alguna información útil.

Saludos,

GMG.