Img background sur <a> avec retour à la ligne : pb IE / bis

Bonjour à tous,

Ce sujet à déjà était traité ici :
[Résolu ] Img background sur <a> avec retour à la ligne : pb IE (lien édité par Igor: merci de faire vrai liens pour les url à rallonge)

mais j'aimerai quelque précision :

il se trouve que j'ai le même problème; je spécifie la nature du lien entre les balise <A> et </A>, et j'aimerai agrémenter le site par l'ajout d'une image (genre flèche); la perte de cette information (l’image) est sans grande importance, et dans ce cas, je pense que cette solution est acceptable, d'autant que le code est simplifié (pas objet HTML IMG).

Solution qui fonction avec Mozilla et Safari, mais pas avec IE si le lien est sur plusieurs lignes.

Mon code HTML est du type :

<A CLASS="nav" HREF="file.html" TARGET="Main">lien</A>
CSS :
A.nav:link, A.nav:visited {
background-image: url(/nav.gif); /*image 16x16*/
background-repeat: no-repeat;
background-position: 1px 1px;
padding: 2px 2px 2px 18px;
text-indent: 0px;
display: in-line
}

Une solution ?

Merci

PS : étant grand débutant, merci d’être indulgent
PS Bis : bravo pour votre site
Modifié par Igor (12 Sep 2006 - 00:24)

Ton code fonctionne bien de mon côté en supprimant le "/" de devant ton image.

background-image: url(nav.gif); /*image 16x16*/

Tout d'abord, merci pour ta réponse; mais non, ce code ne fonctionne pas sous IE si, et seulement si, le lien entre les deux balises <A> et </A> doit s'afficher sur plus d'une ligne (alors qu'il est OK sur Mozilla et Safari que j'ai pu tester :

Imagines un paragraphe, blabla,bla, et <A CLASS="nav">un lien dans ce paragraphe</A>, liens que je voudrais faire précéder d'une image.

Arranges toi (re-dimensionnes) pour que "un lien dans ce paragraphe" apparaisse sur plus d'une ligne, et tu verras (est-ce le bon terme?) que l'image n'apparaît plus sur IE... alors que sur Moz et Safari, elle apparaît toujours juste avant "un lien...".

A+

Bonjour,

IE a en effet des difficultés dans ce cas, sa manière de construire les boîtes de ligne (les lignes successives) n'étant pas totalement conforme à CSS2.1.

Pour contourner ce bug d'IE, tu peux:
- soit faire porter l'image par un élément span placé sur le premier mot du lien, et non par le lien lui-même (le premier mot ne générant obligatoirement qu'une seule boîte de ligne, IE n'a pas de difficulté)
- soit utiliser une image HTML (avec alt="")

Merci pour la confirmation.