[résolu] Bug ie : pblme de backg img pour un lien qui est sur 2 lignes

Bonjour à tous,

J'utilise sur mon site un petit picto pour signaler un lien qui envoie vers un autre site à l'aide d'une classe spéciale qui 'pose' une image de fond sur mon lien.
Mais lorsque mon lien est sur 2 lignes, ie est perdu et affiche l'image à la fin de la première ligne (donc au milieu de mon lien..!).

Exemple sur cette page http://www.clubhippiquemeaux.com/activites.php dans le dernier paragraphe, sur le lien 'spectacle historique de Meaux' , on voit la petite flèche qui fait n'importequoi..
Dans le paragraphe du dessus, l'image du lien 'parc du Pâtis' apparait correctement (car les termes sont regroupés sur la meme ligne).

voici le code de mon style :

a.ext {
background:transparent url(../img/ext.png) no-repeat right center;
padding-right:13px;
}

que j'applique au lien que je veux, par exemple:

<a class="ext" title="Site officiel du spectacle historique de Meaux" href="http://www.feerie.org/">spectacle historique de Meaux</a>

Vous êtes mon dernier espoir , j'espere que quelqu'un a déjà été confronté à ce probleme et a pu le terrasser . Ce qui m'inquiete c'est que je constate que ce bug existe sur le site wikipedia (dans leur cas, le petit picto n'apparait plus sous ie quand l'intitulé du lien passe sur 2 lignes)

Merci de votre aide!!
Modifié par sofff (02 Sep 2008 - 13:59)

Salut,

à première vue IE considère dans ce cas que le lien a une hauteur de 2 lignes et affecte le padding-right sur le "rectangle" ainsi créé.

Le plus simple serait peut-être de rajouter un SPAN après ton lien auquel tu affecterais la classe ext :

<a href"#">Mon lien que j'ai.</a><span class="ext">&nbsp;</span>

A+

C'est effectivement un bug d'IE. Pas de correctif à ma connaissance. On pourra:
1. réserver cette amélioration ergonomique aux navigateurs qui la gèrent bien, en utilisant le pseudo-élément :after et la propriété content pour afficher cette icône, ou encore en annulant cette image de fond et le padding correspondant dans une feuille de correctifs CSS pour IE7 et inférieurs;
2. utiliser une image dans le code HTML (<a href="#">Intitulé du lien <img alt="(lien externe)" /></a>).

arf, c'est bien ce que je craignais
Merci de vos réponses
je met tout de meme le tread en résolu

bonjour,

quelques alternatives tout de même :

renvoi le lien sur une ligne :

* Pour IE seul : zoom:1;
et pour les autres :a.ext:after {content: url(ext.png);}

* Pour IE et nombre de navigateurs : display:inline-block; (l'alternative s'applique presque partout sans CC)

* white-space:nowrap; .... cette derniere s'applique a l'ensemble de nos navigateurs graphiques actuels , trouve un intérêt certains dans d'autres cas (ex: <span style="white-space:nowrap">1 256 789 votants</span> ne sera pas 'cassé sur 2 lignes' et restera bien lisible.)

Le javascript peut aussi permettre d'inserer le picto dans le html à la volé , en s'appuyant sur une classe , un attribut , ou pour remplacer un texte <a>lien </a> ... Il me semble qu'il y a justement un exemple de ce type sur alsa ... voilou : http://css.alsacreations.com/Accessibilite-du-Web/liens-externes-nouvelle-fenetre

Ah! Re7 relance le débat
Je te remercie de ces exemples; je ne suis pas sure de forcement vouloir renvoyer le lien sur une ligne dans le cas présent (peur de créer de trop grand vides), mais en tout cas j'aurai appris des trucs! (comme d'hab ici de toute façon )