[RESOLU] Problème de combatibilté IE : bloc lien 'au dessus' d'une

Bonjour à tous, voilà mon problème :
j'ai une div avec à l'intérieur une image et du texte. Avec jquery, une balise <a href ... > est générée et en css je viens la placer au dessus de cette div. Le but est que toute la div soit cliquable. Les styles de cette balise <a> sont :

position:relative!important;
display:block;
width:209px;
height:61px;
z-index:15;
text-indent:-5000px;

Sur tous les navigateurs (FF, Safari, Chrome mais pas IE8), quand je passe le curseur sur la div (et donc sur le <a> qui est positionné au dessus), le curseuyr se transforme en main fermé avec un doigt déplié, et je peux cliquer sur le lien.
Mais avec IE8, tant que je suis sur les espaces vides de la div j'ai le même résultat, mais quand je suis sur l'image ou le texte, le curseur se transforme en barre vertical (comme dans Word) et le lien n'est plus actif.
A noter aussi que si dans les styles du <a> je rajoute la propriété :
background-color: red;
toute la div devient cliquable (mais on ne voit plus l'image ni le texte bien sur, puisqu'ils sont recouverts par le fond rouge, vous suivez ?).

Est ce que quelqu'un aurait une idée pour régler ce problème sur IE ?
Modifié par n'ricomico (28 Sep 2009 - 10:04)

En fait j'ai trouvé une astuce, mettre une image en background. Cette image est en png24 et a une opacité de 1%. Là, IE prend bien en compte tout le <a ..> comme un lien

Bonjour,

Une image cliquable DOIT toujours se trouver dans le code HTML. En plus ça évite de faire des bidouilles.

En fait je ne sais pas si mon problème était très clair. Je cherche à réaliser en jquery ce module joomla visible ici : http://www.planeteuso.fr/ (le défilement des 4 news).

En utilisant ce modèle http://www.malsup.com/jquery/cycle/int2.html avec l'effet 'pager' j'arrive quasiment au résultat : avec du css je déplace les numéros sur fond jaune (1, 2 3 etc.) à droite, je les aligne verticalement et à la place de chaque numéro je met une miniature de l'image courante avec le titre de la news.

Ces lien sont généré automatiquement par le script, et ils servent à faire fonctionner le diaporama.

Donc si vous avez suivi j'ai dans ma boite a à la place de 1, 2 , 3 mes miniatures avec le titre de la news. Pour tous les navigateurs (sauf IE ) ça fonctionne, mais pour IE, quand je passe la souris sur l'image ou le texte, il ne compte plus le lien et me met un curseur.

Je pense que Laurie-Anne tu me conseillais de mettre les images et les titres englobés dans des liens, mais cela ne marche pas car ces liens ne seront pas pris en compte par jquery et donc n'afficheront pas l'image du diaporama. En effet, dans le code de ce diaporama, c'est le script qui créé les élément la div 'nav' (si tu regardes le code de la page) et les liens à l'intérieur. Donc solution de secours :
en css mettre à ce lien (accessible par div#nav a) une propriété background-image d'opacité 1%, pour qu'enfin il soit détecter par IE même au survol des images et du texte.

C'est sûr que ce n'est pas très propre mais ça fonctionne
Modifié par n'ricomico (29 Sep 2009 - 19:20)