Disparition d'un lien après un "width:..."

Bonjour,

Voici un problème de lien qui ne fonctionne plus quand je définis une largeur de bloc.

J'ai une structure assez simple pour agrémenter graphiquement des liens :

<a href="#test">
	<span class="decor"><img src="img1.jpg" /></span>
	<span class="legende">Texte 1</span>
</a>

<a href="#test">
	<span class="decor" style="width:120px;"><img src="img1.jpg" /></span>
	<span class="legende">Texte 2</span>
</a>

Et le code CSS associé

a {
	float: left;	
	border:1px solid orange;
	padding: 10px;
	text-decoration: none;
	}
a span.decor {
	padding: 10px;
	display: block;
	border:1px solid green;
	}
a span.legende {
	display: block;
	font-weight: bold;
	font-size: 0.9em;
	color: #000;
	}
a:hover {
	color: #000;
	}
a:hover span.legende {
	color: #c60033;
	}

Voici un Exemple en ligne
Les liens pointent vers une ancre définie plus bas
Cadre Orange = balise A
Cadre Vert = Span.decor

il n'y a aucune différence entre les 2 structures excepté que la largeur du second Span.decor est définie

<span class="decor" [b]style="width:120px;"[/b]>

Pourtant cela suffit pour que lien ne fonctionne plus au dessus de l'image, sous IE.

Auriez-vous une piste ?

Merci

Bonjour Ricou13,

Je ne constate pas de différence sous IE et FF, pour moi, les 2 ancres fonctionnent, mais peut-être n'ai je pas bien compris ton explication.

Salut,

J'utilise FF 1.5 et IE 6.0.

Avec IE ou IETab (sous FF), sur le second bloc, lorsque la souris survole le span (cadre vert) ou l'image qu'il contient, mon curseur redevient la fleche par défaut (et plus la main) et un clic n'a aucun effet.

Ricou13 a écrit :
Avec IE ou IETab (sous FF), sur le second bloc, lorsque la souris survole le span (cadre vert) ou l'image qu'il contient, mon curseur redevient la fleche par défaut (et plus la main) et un clic n'a aucun effet.

Le lien sur le texte (second span) marche, mais le premier span en display: block; et ayant une largeur fixe n'est plus cliquable.

Je n'y connais pas grand chose, mais quand je vois : « je rajoute une dimmension fixe et j'obtiens un bug », je pense à du HasLayout.
http://www.test.blog-and-blues.org/haslayout/

Mais je n'y ai rien vu qui corresponde à ce cas. Je pense tout de même que la piste du layout pourrait être bonne.
Modifié par mpop (24 Apr 2006 - 22:54)

J'ai lu également tous les article du lien mais je vois surtout des problèmes de positionnement et de dimensionnement.
Mais je ne suis pas sûr que ce soit ça car les 2 span vert sont en display:block et ont donc un haslayout à true (ou alors j'ai pas tout compris)

Et, effectivement, je n'avais pas précisé que à l'extérieur du span vert, le lien fonctionnait correctement, donc y compris sur le texte

Autant pour moi, j'avais mal lu.

Le display:block ne donne pas le layout (c'est le display:inline-block).

J'ai testé et le second span à bien le layout à cause du width !

Quelle saloperie ce truc de layout ( Et j'inclus IE la dedans ! )
On vient de le trouver ? Parce que ça ne fait que depuis quelques jours que j'en entend parler.

Ricou13 a écrit :
On vient de le trouver ? Parce que ça ne fait que depuis quelques jours que j'en entend parler.

Non, mais c'est suffisamment poussé (série de bugs non spectaculaires mais génants) pour qu'on ne s'en soucie pas trop dans un premier temps. Et puis, comme on utilise très souvent des largeurs fixes, on considère parfois le comportement d'IE avec bug de layout comme un comportement normal du navigateur…