Lien en display block non cliquable sur IE

Bonjour,

Je rencontre aussi ce problème assez bizarre. J'ai le lien suivant

<a id="lien_accueil" href="http://chevres-du-moustayou.fr"></a>

en display block.

Or ce lien est cliquable sur les dernières versions de Firefox et de Chrome mais par sur celle d'IE (testé IE10).
En effet sur IE mon lien n'est pas cliquable sauf si je lui donne une couleur de fond.

Comment puis je faire pour qu'il soit cliquable sous IE même sans couleur de fond ?

Mon problème concerne la tête de chèvre du site visible ici en haut à gauche que je veux rendre cliquable à l'aide d'un lien vide, la tête de chèvre étant intégrée au header.

Merci d'avance,

Timothée

Salut,

à mon avis, un petit z-index:3 sur ton #lien_accueil devrait régler le problème.

Sinon, pour faire une intégration plus simple, tu peux mettre ton image (http://chevres-du-moustayou.fr/wp-content/header-images/header_accueil.jpg) en background du header et tu n'aurais plus besoin de positionner ta tête de chèvre en absolu
Modifié par speedkills (07 Jun 2013 - 23:46)

Salut Speedkills,

Merci pour ta réponse. Mais j'avais déjà essayé, même avec un z-index 100 et ça ne change rien au problème. Sinon ton idée de mettre le lien sur toute l'image du header n'est pas mauvaise. Je la mettrai en place si j'arrive pas à rendre uniquement la tête de chèvre cliquable.

En fait, à mon avis, pour une fois c’est IE qui a raison ! En effet, comme tu le dis toi-même, tu crée un lien vide ! C’est sémantiquement un non-sens ! Un lien est un objet identifiable qui donne accès à un ailleurs (c’est beau). Alors certes, quand tu regardes ton site dans un navigateur visuel, tu vois un objet pour porter ce lien : la tête de chèvre, mais cet objet néxiste pas dans ton code. <a></a> est un objet vide. Les autres navigateurs sont plus permissifs…

Ceci étant dit, de 2 choses l’une. Ou bien la tête de chèvre n’est qu’un élément de décoration, comme la photo de fond de page ou bien elle est un élément informatif (comme un logo).

Dans le premier cas, la proposition de speedkills est une possibilité. Tu peux aussi crée un lien texte "Retour vers l’accueil" dont tu masques le texte avec par exemple un text-indent: -10000px (ou toute autre méthode pour masquer du texte) avec comme tu l’as fait la chèvre en fond de block :

<a id="lien_accueil" href="http://chevres-du-moustayou.fr">Retour vers l’accueil du site des Chèvres du Moustayou</a>

Tu améliores sans doute en plus ton référencement…

Dans le second cas (qui serait à mon avis plus logique) il faut que tu revois tout ton header : en effet, ton image du header est à mon sens purement décorative, non informative. Donc, tu aurais un header avec une image de fond (les photos) et ce header contiendrait un titre (<h1>) « Les Chèvres du Moustayou » dont tu masquerais le texte comme dans l’exemple ci-dessus pour afficher ton titre en image PNG en background CSS et un logo (<img>), objet réel, contenu dans un lien.

Hello,

J'ai mis en place le texte sur le lien comme tu me l'as proposé Derwoed, mais j'ai toujours le même problème : à moins de mettre un background-color au lien, celui-ci n'est pas cliquable sous IE.
Si quelqu'un a une autre idée je suis preneur.

Pour rappel, il s'agit de la tête de chèvre visible : visibile ici

salut,
et si t'essayais de corriger d'abord les quelques erreurs de ton code, parfois ça règle les choses, surtout pour IE qui est beaucoup moins permissif que les autres.

Je n'ai jamais rencontré ce genre de comportement, quelque soit la version d'ie.
Comme dis précédemment, le problème peux venir du code en amont de ton lien.

Bonjour à vous.

Les erreurs (mineures) avant le code concerné ont été corrigées à l'aide du validateur W3C. Il ne reste que deux erreurs beaucoup plus loin dans le code et sans grande importance à mon avis (un <li> pas dans un <ul> et un <ul> </ul> sans <li> à l'intérieur)

Pourtant le comportement (et le problème) reste le même

Pour Ie8 ,
il suffirait de donner une couleur de fond proche d'une opacité de 0, pour qu'elle soit imperceptible a l'oeil mais presente de façon a interagir avec la souris.

Rgba(), n'est pas supporté. dommage
Solutions:
1) applique en fond la meme image que celle que l'on voit deja en superposant le lien au dessus.

2) appliqué cette image en dur et un overflow ou clip sur <a> [b]bonus : alt peut-être utiliser[/i]

3) bricole: je donne une couleur de fond et un filtre a IE via CC:

filter: alpha( opacity=01); background: white;

Hello,

Finalement j'ai choisi de refaire mon header en distinguant ma tête de chèvre du reste de mon header. Au passage j'ai testé la solution

filter: alpha( opacity=01); background: white;

qui a bien fonctionné, sous IE 8 en tous cas.

Pour moi ça fonctionne au final. Merci pour votre aide.

Timothée