[Résolu] Différence d'affichage de liens entre IE & FF

Bonjour,

J'ai cherché mais n'ai rien trouvé parlant de ça alors je viens demander ici.

Je chipote peut-être un peu mais voilà j'ai fait un menu dans lequel les liens sont soumis à cette propriété CSS :

.menu a { color: #424242; text-decoration: underline; font-weight: bold; }

Ce qui me gène c'est que sous Internet Explorer les liens s'affichent en gras avec un soulignement "non-gras", une ligne d'un pixel en d'autres termes ; alors que sous FireFox les liens possèdent un soulignement d'une ligne de 3px de largeur.

Puisque les liens sont en gras je suppose que c'est l'affichage de FireFox qui est "normal" mais je souhaiterai vivement que sous tous les explorateurs la ligne "underline" fasse un pixel de largeur (c'est plus "léger"...).

Comment faire ? Y'a t'il un moyen... Merci pour vos réponses.
Modifié par Chahrazad (10 Apr 2006 - 18:57)

Salut,

Tu peux remplacer le soulignement par une bordure inférieure de 1px de la même couleur que ton lien, ce qui donne

.menu a{
color: #424242; border-bottom:1px solid #424242; font-weight: bold; text-decoration:none;

N'oublie pas d'indiquer la propriété text-decoration à ton lien pour éviter le soulignement.

Pas bête Mais la ligne est trop éloignée du mot constituant le lien, j'ai essayé avec un padding-bottom négatif mais cela ne change rien.

Comment faire

Si tes liens sont en display:block, tu peux jouer sur la hauteur du lien. Fais tes tests pour trouver la bonne valeur avec ta mise en page.
Si tes liens ne sont pas en block, tu ne pourras pas les dimensionner. Il faudra alors bidouiller autrement, genre avec une image de fond qui se répète ou autre.
Modifié par Jihel (09 Apr 2006 - 13:22)

J'ai fini par mettre des images, elles ne pèsent pas trop lourd alors ça va.

Merci pour les conseils, j'ai noté la technique

Un petit détail : ton image peut faire 1px de large et avoir un arrière-plan avec une syntaxe du type

.menu a{
background:url(ton-image.png) #couleur repeat-x;
...
}

repeat-x te permet de limiter vraiment le poids de l'image pour avoir qqch qui ne dépasse pas les 300 octets.
Voir les détails de la propriété background
Si ton problème est résolu, n'oublie pas d'editer ton message pour l'indiquer
Modifié par Jihel (09 Apr 2006 - 17:57)

Le problème c'est qu'avec un fond lorsqu'on l'on a un affichage "taille plus grande" de la police ou que l'on est sous mac (gras) le soulignement de correspond plus... J'ai simplement fait des images contenant le mot de la rubrique + sont soulignement ; ça reviens à 7,5ko de plus mais bon...

As tu pensé à aligner ton image de fond sur le bas de ton lien ? Tu peux le faire avec la propriété background-position. Les détails sont à la page que je t'ai indiquée avant. AMHA 7,5ko pour un effet de soulignement, c'est 7Ko de trop... D'autant plus que si on entre dans des considérations d'accessibilité et / ou de référencement, c'est vraiment pas le mieux d'avoir le titre en image...

Je sais mais j'ai encore essayé ça rend mal...

Dès que j'arrive à accorder un truc à peu près (je dois donner un width pour chaque lien, sinon le soulignement est trop long) et encore que sous IE et FF y'a 3px de décalage en hauteur je ne sais pourquoi (je n'ai pas encore trouvé le moyen d'afficher pareil), dès que le texte est en taille supérieure ("ctrl"+"+") tout bug... normal puisque les width sont fixes.

J'ai remis avec les images, je n'arrive pas à faire le menu sans...

Bon ben je laisse tomber du moins pour le moment...
Modifié par Chahrazad (10 Apr 2006 - 18:56)