[Résolu] Rendu de liens IE7/ff

Salut,
Je me débats avec un problème de rendu sur des liens :

IE :
FF :

L'image est soulignée avec FF.
HTML :

<h2><a href="reseau.htm" title="Nos offres Réseaux">
<img src="images/blank.gif" class="icon icon-reseau" alt="">Réseaux</a></h2>

Et la CSS :

#menu h2 {
line-height:48px;
font-size:130%;
margin:0;
padding:0;
text-indent:0;
}
#menu h2 a {
text-decoration:underline;
}
#menu h2 a img.icon {
background:url(images/image.gif) no-repeat;
width:48px;
height:48px;
margin-right:3px;
margin-left:0px;
vertical-align:middle;
border:none;
}
#menu h2 a:hover img.icon {
background:url(images/imageh.gif) no-repeat;
}
#menu h2 a img.icon-reseau,#menu h2 a:hover img.icon-reseau {
background-position:0 0;
}

Si ça inspire quelqu'un ? Sinon je hacke mais ce serait mieux sans.

Merci par avance
Modifié par papyjo (17 Sep 2007 - 16:18)

Salut,

Pourquoi ne pas écrire :

<h2>
    <img src="images/blank.gif" class="icon icon-reseau" alt="">
    <a href="reseau.htm" title="Nos offres Réseaux">Réseaux</a>
</h2>

(si l'image n'a pas à être cliquable)

ou :

<h2>
    <a href="reseau.htm" title="Nos offres Réseaux">
        <img src="images/blank.gif" class="icon icon-reseau" alt="">
        <span>Réseaux</span>
    </a>
</h2>

avec :

#menu h2 a span {
    text-decoration:underline;
}

(si l'image doit être cliquable)

Salut Koala,

Merci de ta réponse. Ta solution fonctionne c'est ce j'appelais hacker.

L'image est cliquable et soumise au rollover au survol.

Je vais attendre de voir si ça inspire quelqu'un, mais je ne comprends pas le rendu de FF.

Merci encore

Bonjour,

Voir la page de tests suivante:
http://web.covertprestige.info/test/25-soulignement-image-dans-lien.html

Je cite la conclusion (provisoire?):

a écrit :
Au vu de ces tests, il semble impossible d'obtenir chacun des deux résultats suivants:

1. texte et images des liens soulignés dans tous les navigateurs;
2. texte des liens soulignés et images non soulignées.

Le seul rendu cohérent d'un navigateur à l'autre que l'on puisse apparemment obtenir est donc le suivant: texte et images des liens non soulignés (via un text-decoration:none; sur les liens).

papyjo a écrit :
mais je ne comprends pas le rendu de FF

Je ne crois pas que la spécification CSS indique quoi que ce soit pour le rendu dans ce type de situation. Donc, chaque navigateur fait ça à sa sauce. Ce qui donne:
- Internet Explorer 5-7 + Opera 9: image non soulignée, texte souligné;
- Firefox 2 + Safari 3b: image et texte soulignés.

À voir pour Safari 2, Konqueror 3.5, etc.

Florent V. a écrit :

À voir pour Safari 2

Même comportement que Safari 3b.

Merci à tous.

J'en étais aux mêmes conclusions. Je ne pouvais pas tester facilement safari.

Bon... je vais hacker comme je disais plus haut.