Problème de lien dans div float [Résolu]

Bonjour à tous,

Je travaille sur un site en utilisant un système de positionnement à base de grille, c'est-à-dire que pratiquement tout le site est dimensionné au pixel près à partir de feuilles de style. Le bout de code qui me pose problème est le suivant :

*  { margin: 0; padding: 0; }
p { position: relative; }
.float-left { float: left; }

<div class="float-left">
<a href="http://www.google.com">
Google
</a>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>

Sur mon Opera 10.10, tout fonctionne comme prévu.
Sur FF (3.5.6) et Google Chrome (4.0.249.43), le lien n'est pas cliquable et le texte du lien n'est même pas sélectionnable !

Dans la réalité j'utilise ce principe pour des liens sur des images positionnées en float avec des paragraphes à leur droite. Si la hauteur du paragraphe à droite de mon image ne prend que la moitié de la hauteur de l'image, alors le bas de l'image sera cliquable mais pas le haut !

Y a-t-il un moyen de remédier à ça sans devoir passer mes paragraphes en static (qui modifierait leur positionnement) ?

Merci d'avance, bonne journée!
Modifié par favelt (07 Feb 2010 - 14:51)

Salut favelt, bienvenue sur Alsacréations

Le code que tu donnes ne suffit pas à reproduire le comportement que tu décris. Donc, pourrais-tu nous fournir une page en ligne, ce qui permettrait de mieux cerner le problème ?

Salut koala64

La page minimaliste pour le test est ici : http://scout-perceval.ch/devel3/test.html
Et le problème dans son contexte avec les images ici http://scout-perceval.ch/devel3/index.php?pageId=8 (site en construction)

Ce qui pose problème sur ta page en ligne, c'est la largeur de 234px que tu as placé sur la classe "old-article-image". Soit tu la supprimes soit tu fais une image de 234px elle aussi. Dans le cas où tu n'as pas la main sur le html, alors il faut forcer l'image à prendre 100% de cette largeur.

J'ai fait un essai en supprimant toutes les contraintes de largeur sur les images. Le problème reste le même, ce qui pose problème c'est cette interraction que je n'arrive pas à expliquer entre le position:relative des paragraphes et le float:left de l'élément qui contient un lien quelconque. Sur la page http://scout-perceval.ch/devel3/test.html je n'ai d'ailleurs pas d'images, aucune contrainte sur la largeur du contenu de la div mais le problème est le même.

Ben de deux choses l'une :

- soit tu mets un z-index négatif sur ton élément positionné en relatif
- soit tu supprimes ce positionnement relatif qui ne sert à rien (les propriétés padding et margin suffisent)

Super merci beaucoup, le z-index négatif fonctionne impécablement bien

Bonne journée !