[Résolu] Retirer la propriété "text-decoration" dans une ima

Bonjour à tous,
Sur mon site Internet, pour mes liens j'ai mis la propriété "text-decoration", jusque la, pas de problème, mais lorsqu'il s'agit d'une image, exemple simple :

<p><a href=""><img src="img.png" />Texte</a></p>

...le "text-decoration" est aussi appliqué à l'image.
Vous l'aurez compris, j'aimerai que seul "Texte" possède un "text-decoration", or, même l'image a cette propriété, même lorsque je fais ceci :

img a {
text-decoration: none;
}

Savez-vous comment supprimer cette propriété uniquement lorsque les liens sont des images ?
Merci d'avance et désolé si je me suis mal exprimé, j'ai eu un peu de mal à expliquer ce petit problème.


Bonne après-midi
Modifié par Gaylord.P (16 Jul 2005 - 14:16)

J'ai justement lu dans le meyer hier soir que text-decoration est appliqué à toute la boîte de ligne même si certains élément veulent la supprimer.

Je n'ai jamais testé, mais que se passe t il si tu sors l'image du flux , flottant, relatif... ?

Cette entrée de la faq répond t-elle à ta question: Comment supprimer la bordure (bleue) autour des images de lien ?

Igor a écrit :
Cette entrée de la faq répond t-elle à ta question: Comment supprimer la bordure (bleue) autour des images de lien ?

Négatif

Bonjour,

le problème a été abordé (pour un <span> et non une image) dans ce fil : http://forum.alsacreations.com/topic.php?fid=4&tid=5297

Tu ne peux pas annuler l'effet produit par le text-decoration du lien a pour un des éléments descendant de celui-ci.

Il faut doter les liens contenant une image d'une classe spécifique:

<p><a href="" class="UnderlineNo"><img src="img.png" />Texte</a></p>

pour laquelle tu précise un :

a.UnderlineNo {text-decoration: none}

TriadPtale a écrit :


Je n'ai jamais testé, mais que se passe t il si tu sors l'image du flux , flottant, relatif... ?

le soulignement est conservé dans tous les cas que j'ai pu observer.

<p><a href="toto.html"><img alt="" src="24.jpg" height="207" width="300" />Un texte</a></p>

a{text-decoration:underline;} 
a img {border: 0;}

Exact ne fonctionne pas dans Firefox, mais c'est ok dans IE et Opera.

D'accord, je vous remercie tous pour votre aide.


A bientôt

Une astuce qui me semble périlleuse, mais bon, pourquoi pas ?

... Pour Firefox :

a{text-decoration:underline;} 
a img {border: 0;position:relative;top:3px;} 

(tout va bien avec une petite valeur de top tant que l"utilisateur n'agrandit pas les caractères affichés, par exemple)
Modifié par Laurent Denis (16 Jul 2005 - 14:17)

Merci pour ce dernier conseil, mais je ne préfère pas m'aventurer dans des "petits hacks", les solutions cités ci-dessus me convienne, et puis au pire, si je vois que cela bug sur certains navigateurs, j'enlève cette propriété pour les parties concernés, c'est pas gravisime.

Ceci dit, je pense que ce sera utile à d'autres s'ils ne peuvent pas faire sans cette propriété, donc encore merci