28172 sujets

CSS et mise en forme, CSS3

Background dans un lien contenant une image internet explore [résolu]

Bonjour,

Tout d'abord je tiens à m'excuser si le sujet a déjà été abordé mais je n'ai rien trouvé.
Je suis intégrateur xthml / css, et j'ai donc voulu bien faire en installant internet explorer 8.

HTML

<a href="#">Lien 1</a>
<a href="#"><img src="lien2.jpg" alt="lien2" /></a>


CSS

a img {border:none;}
a:hover {background:#000000;color:#ffffff;}


Je simplifie mon code pour l'exemple, pour bien que vous cibliez le problème.

Devinez ce qu'il s'affiche lorsque je passe la souris sur l'image qui est dans le <a> ? Une jolie ligne noire en dessous de l'image.

Le meilleur, c'est qu' IE 6, IE 7 se comporte très bien, normal vu la simplicité de ce code.
Si vous avez des idées, peut-être une propriété CSS oublié de ma part.

Je sais comment palier ce problème, par exemple mettre une classe sur les liens qui contiennent des images et lui donner un background:none;.

J'aimerais justement ne pas surcharger mon code html de classe juste pour un navigateur qui est censé être plus proche de FF, que de ses prédécesseurs.
Modifié par jayjay (30 Apr 2009 - 14:00)
Florent V. a écrit :
Bonjour,

Une page en ligne?

Bonsoir. Smiley smile


Déjà merci pour votre réactivité.
Je travaille en local pour le moment.

Tenez je vous donne le code vous avez juste à le copier dans un fichier et avoir une image du même nom dans le même répertoire, peu importe la taille.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
	<title>Mon Titre</title>
	<style type="text/css">
	body, table, tr, td,th, div, p, ul, li, h1, h2, h3, h4, h5, h6, form, img, hr, input { margin:0; padding:0;}
	a img {border:none;}	
	a:hover {background:#000000;color:#ffffff;}
	</style>
</head>
	<body>
		<p><a href="#">Lien 1</a></p>
		<p><a href="#"><img src="lien2.jpg" alt="lien2" /></a></p>
	</body>
</html>


Merci.
Tiens, un reset CSS, je savais pas que ça se faisais encore ces machins là. Smiley smile

Sur le fond, le problème constaté est lié à ceci:
http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html

Et également à ceci:
http://covertprestige.info/test/25-soulignement-image-dans-lien.html

En gros: pour l'essentiel, IE8 applique les règles correctement. L'image est bien positionnée (vertical-align: baseline), avec un espace sous l'image. La mise en forme du lien est bien appliquée.

Tu obtiens le même résultat avec Firefox dès que tu rajoutes une espace dans le lien (même pas une espace insécable, une simple espace) avant ou après l'image.

Certains navigateurs (Firefox par exemple) n'appliquent pas la mise en forme du lien (background, soulignement) lorsque le lien ne contient qu'une image. D'autres vont plus loin, et n'appliquent la mise en forme du lien qu'au texte, sans souligner l'image lorsqu'un lien texte contient également une image. Mais, à priori, rien n'oblige les navigateurs à appliquer ce genre de compromis.

Solutions dans ton cas: à part appliquer du vertical-align: middle à toutes tes images dans des liens, je ne vois pas.
Et oui, j'ai remis la faute sur Internet Explorer 8 alors qu'il ne fait qu'appliquer les règles, et le fait que Firefox ne prenne pas en compte les styles pour des liens qui ne contiennent que des images m'a trompé.

La solution proposée et ton explication sont impeccables.

Merci beaucoup.
Sujet clos
Aller à