IE6 & 7 : pb de positionnement de background image

Bonjour,

J'utilise une fonction Javascript qui ajoute automatiquement une classe CSS sur tous les liens pointant vers l'extérieur de mon site. Jusque là pas de soucis.
La classe CSS ajoute un background image et un padding sur les liens concernés.
Mais je remarque un petit problème de positionnement sur IE 6 et 7 quand le lien est sur plusieurs lignes.

http://espacecrea.com/liens-externes.gif

Voici le code source correspondant :

<style type="text/css">
	.box {
		width:200px;
		border:dashed 1px #999;
		margin:20px;
		padding:10px;
		font:12px Arial;
	}
	a {
		color:#db3b3c;
		text-decoration:none;
	}
	a:hover {
		text-decoration:underline;
	}
	a.externalLink {
		background:url(external.gif) center right no-repeat;
		padding: 2px 15px 2px 0;
	}
</style>

<div class="box"><a href="http://www.google.com" target="_blank" class="externalLink">Un lien externe court</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="box"><a href="http://www.google.com" target="_blank" class="externalLink">Un lien externe très très très très très très long</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Auriez-vous une idée pour régler ce problème sur IE 6 et IE7 ?
Merci beaucoup.
Modifié par lafrite (08 Feb 2009 - 05:10)

Hello

J'ai cherché rapidement, sans résultat.

Pour positionner le background, IE se comporte comme si le lien était de type block (si le lien est sur deux lignes, le "center" se base par rapport à la hauteur totale).

Sinon tu as toujours d'autres alternatives :
- Mettre la puce au début et non à la fin du lien,
- Utiliser une balise <img>.
- Rajouter un <span></span> avant </a>, garder ta méthode actuelle pour Firefox mais utiliser le code suivant pour IE (via commentaires conditionnels) :

a {
position:relative; }

span {
position:absolute;
bottom:0;
right:0;
display:block;
width:...px;
height:...px;
background:transparent url(img/test.jpg) no-repeat; }

Salut BeliG,

Comme je n'ai pas trouvé de solutions moi non plus, je vais appliquer ta méthode en injectant un <span></span> juste avant le </a> pour IE 6 et 7.

En tout cas merci pour ton astuce !