Lien sur div incompatible avec IE

Bonjour,

Je travail actuellement sur un site qui me donne du fil à retordre .

Voici la page qui me pose probléme http://clubphilo.free.fr/aes/contenu/produits.php .
Je presente ici 3 catégories de produits.
Sous FireFox le lien est présent sur tout le div entier de la catégorie et fonctionne normalement.
Mais quand j'ai testé sur IE, le lien fonctionne trés mal, il faut cliquer pleins de fois avant d'activer le lien ...
Chaque catégories est composé de plusieurs div, j'ai essayer d'appliquer le lien sur différents d'entre eux mais sa ne fonctionne pas ...
J'ai aussi la possibilité d'apliquer le lien seulement sur l'image mais c'est tout de suite moins attractif ...
Avez vous une sur la façon dont je pourrais m'y prendre pour corriger ce probléme ?
Merci
Modifié par johanndiablo (13 Jun 2009 - 15:35)

Bonjour,

1. Il te faut un code HTML valide, pour commencer. Ce n'est pas le cas ici.

2. Tu ne peux pas placer un élément de type bloc (DIV, P, TABLE, etc.) comme contenu d'un lien (élément A), ce dernier étant un élément de type en-ligne. Les navigateurs vont plus ou moins bien réagir à ce genre de code invalide: l'appliquer tant bien que mal, ou bien l'ignorer...

3. Les règles d'accessibilité stipulent que le contenu des liens doit être pertinent et compréhensible. Transformer un bloc de texte avec titre, contenu descriptif et image en un seul lien, c'est un des meilleurs moyens de ne pas respecter cette règle.

4. Le mieux est donc de faire porter le lien sur un élément pertinent, par exemple le titre du bloc.

5. Éventuellement, si on souhaite que le bloc complet soit cliquable, on pourra rajouter ce comportement comme une surcouche JavaScript. Un script JS récupère l'URL du lien pour chaque bloc, et associe le chargement de cette URL à l'évènement onclick sur le bloc complet.

6. Que l'on utilise cette solution ou pas, il est capital d'avoir des liens textuels qui sont reconnus par l'utilisateur comme tels. En voyant la page que tu présentes, la seule chose qui m'apparait clairement comme cliquable ce sont les quatre liens du menu de navigation principal. Il y a donc un problème ergonomique au niveau du design lui-même.

Merci pour ta réponse,

J'essaye tant bien que mal de respecter ces fameuses régles mais j'ai un niveau douteu en ce qui concerne le CSS, je fait ce que je peux pour améliorer ça...
Entre temps j'ai trouvé une solution qui par contre ne corrige toujours pas les problémes que tu as soulignés.
J'ai utilisé <div class="bas" onclick="window.open('produits/emballages.php','_self');"> mais la petite main indiquant le lien n'apparait pas dans ce cas meme si le lien fonctionne aussi bien sous firefox que sous ie
Modifié par johanndiablo (13 Jun 2009 - 16:22)

johanndiablo a écrit :
J'ai utilisé <div class="bas" onclick="window.open('produits/emballages.php','_self');">

C'est une solution acceptable, et en gros c'est une manière un peu «quick and dirty» de faire ce que j'évoquais dans mon point n°5. Par contre, pour que cette solution soit correcte (même si peut mieux faire), il faut ABSOLUMENT disposer d'un vrai lien en bonne et due forme dans le contenu de ce bloc.

Okay, merci encore.

J'ai inséré des liens sur les images.

johanndiablo a écrit :
J'ai inséré des liens sur les images.

Avec un texte alternatif pertinent? Et pourquoi pas sur les titres des boites, ce qui serait tout de même plus explicite que sur une image d'illustration?