[Résolu] Soulignement bleu d'une image-lien sous Firefox

Bonjour tout le monde,
j'suis nouveau sur le forum et je m'y suis inscrit pour poster mon problème.
Avant cela j'ai cherché sur la toile et le forum pour voir s'il n'y avait pas de réponse à mon pb, mais apparement pas.
Donc j'expose mon souci :
je fais un lien sur une image suivi d'un texte et j'ai changé la couleur de la bordure bleue autour de mon image, mais j'ai toujours un souligné bleu en dessous et uniquement sous Firefox (v2.0).
Ma question est donc : comment retiré ce trait bleu qui souligne mon image ?

Voici mon code :
CSS

img{
	border-color:#FF00FF;
}

HTML :

<a ...><img ... />mon texte</a>

Merci par avance de votre aide
Modifié par Nycoala (21 Dec 2006 - 14:33)

Salut aurai-tu un exemple en ligne ?

Salut !

Par défaut, les liens sont soulignés.
Essaie voir ceci :

a {
  text-decoration :none;
}

a img{
  border-color:#FF00FF;
}

Pour avoir une idée de ce que j'ai : suivez ce lien.
J'ai bien essayé la solution de Cygnus (qui fonctionne), mais j'aimerais conserver le souligné sous mon texte et ne pas l'avoir sous l'image, enfin si c'est possible .

Nycoala a écrit :
J'ai bien essayé la solution de Cygnus (qui fonctionne), mais j'aimerais conserver le souligné sous mon texte et ne pas l'avoir sous l'image, enfin si c'est possible .

À priori non, ça n'est pas possible.
Il me semble que ce comportement de Firefox n'est pas conforme aux spécifications, mais que Opera ou Konqueror s'en sortent mieux (je ne sais plus pour IE, par contre).

Edit : tu peux éventuellement faire deux liens (pointant vers la même page) : un pour l'image, et un pour le texte. Il me semble qu'en l'absence de texte, Firefox n'applique plus de soulignement aux images, même si le style des liens le demande.

Au passage : quel est l'intérêt d'utiliser un tableau pour mettre en forme cette page ?
Modifié par mpop (20 Dec 2006 - 15:32)

J'ai essayé le truc de faire 1 lien pour chaque élément (image et texte) et ça fonctionne comme je veux sous Firefox (pour IE c'était déjà bon).
Au passage le code de la page provient d'une autre page où là la structure tableau m'est utile pour la présentation des mes éléments (mm si je pourrais sans doute le faire avec des div, des id, class ou d'autres éléments CSS).
En tout cas merci de m'avoir aidé et surtout aussi rapidement .

mpop a écrit :
À priori non, ça n'est pas possible.

Euh ...
Pourquoi ça le serait pas ?
Ceci devrait fonctionner, non ?

a img{
  border-color:#FF00FF;
  text-decoration :none;
}

Cygnus a écrit :
Ceci devrait fonctionner, non ?

a img{
  border-color:#FF00FF;
  text-decoration :none;
}

Ceci devrait fonctionner pour éviter d'avoir un soulignement pour l'image... mais pas pour la partie du lien qui englobe l'image. Donc non, ça ne fonctionnera pas.

Par contre, si l'image n'est plus considérée comme un caractère, elle ne sera plus soulignée. On peut donc utiliser ceci :

a img {
    display: block;
}

Florent V. a écrit :

a img {
    display: block;
}

c'est juste mais du coup l'image ne reste pas sur la même ligne...

moi j'ai résolu le problème comme ça:

<a href=".."><span class="text"></span><span class="icon"> <img... /></span></a>

du coup on peut même mettre des espaces entre le texte et l'image et ne pas avoir le vide souligné....

	a  	  { text-decoration:none;  }
	a .text	 { text-decoration:underline; }
	a .icon	 { text-decoration:none;  }