28173 sujets

CSS et mise en forme, CSS3

Hello,
je voudrais faire suivre mes liens d'une petite image, mais le pb se pose lorsqu' un lien est sur 2 lignes ...

Explication.
L'exemple est ici : http://openweb.eu.org/articles/images_css/annexes/#ex1

a écrit :
Ajout d'une icône pour une classe par une image de fond
Texte d'exemple Lien d'exemple

Cet exemple montre comment ajouter une icône à tous les liens de la classe extern en utilisant une image de fond. Une flèche doit apparaître à la suite du lien.


Le hic est que lorsque le lien passe sur 2 lignes : Lien
d'exemple
par exemple, l'image ne "suit" plus le lien, puisqu'elle est positionnée en "center right", elle se positionne entre les 2 lignes sur IE6 (firefox "reste" normal, c'en est pléonasmique).
Bref, j'aurais aimé savoir s'il y avait moyen de contourner ça sur IE, plutôt que de faire un hack CSS ...

Merci pour toute réponse.
Modifié par Malcolm (23 Jan 2007 - 21:36)
J'avais constaté le souci, mais je n'ai rien imaginé d'intéressant pour faire rentrer IE dans le rang...

Et en positionnant l'image en bas ?
background-position: right bottom;
Modérateur
bonjour,

avec un display:inline-block; IE va conferé le haslayout au lien concerné , il ne pourra alors plus se"casser" et la balise entiere passera a la ligne . L'image de fond alors ne disparaitras plus et restera derriere le texte.

Si cela te convient , il faut alors verifier le comportement dans opera ou autre navigateur ou le display:inline-block; est implementé.

++
Hello,

la proposition de mpop ne convient pas, en effet mon image actuelle est en center right et même sur 2 lignes en bottom right, elle n'apparait pas sous IE (comme si elle était incluse à un endroit que le lien n'affiche pas).

pour gcyrillus, ton astuce marche, seulement le display:inline-block; ne passe pas au validateur. Dommage, c'était une bonne alternative. JE vais voir si à partir de là je peux trouver qqch. merci !