[CSS ] Padding-top, Safari et Firefox

[Membre supprimé 2]

Bonjour

J'ai retourné le problème dans tous les sens sans pour autant trouver de solution.

Sur cette page, j'ai un problème concernant le border-bottom du menu. La feuille de style est incluse dans la page Html.

Pas de problème sur Safari, mais sur Firefox, cette bordure est décalée d'un pixel.

Quand je joue sur le padding-top du menu, tout rendre dans l'ordre pour Firefox, mais le problème s'inverse pour Safari.

Avez -vous une idée me permettant d'ajuster cette bordure sur la ligne de séparation sur tous les navigateurs ?

Merci beaucoup.

 

[grumff]

Devant un problème d'interprétation entre deux navigateurs, on n'a pas 50 solutions.
Soit tu fais une feuille de style par navigateur, soit tu recherche précisément la cause en trouvant par rapport à quoi chaque navigateur calcule la position DES traitS, et tu contournes en faisant autrement, il doit bien y avoir une 50aines de façons différentes de faire un soulignage identique à celui-ci. Je suppose que tu en connais toi même plusieurs.

 

[kone]

Le problème c'est la façon dont tu définies ta line-height dans ta police:

body {
  /* ... */
  font: 13px/1.5 "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

Apparemment safari et Firefox n'arrondissent pas de la même manière (13 * 1.5 = 19.5).
Si tu mets un rapport qui n'est pas ambigu (par ex: 13 * 1.6 = 20.8 ou encore 13 * 1.4 = 18.2)
ton problemes sera résolu:

body {
  /* ... */
  font: 13px/1.6 "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}
#menu ul li a.selected {
	color: #FFF;
	padding-bottom: 8px;
	text-decoration: none;
	border-bottom: 1px solid #ee1b4c;
}

En esperant que ca t'aide

----- EDIT ------
Evidemment tu t'épargnerais des maux de tête si tu utilisais une valeur "length" (ie 19px) pour ta lineheight, plutot qu'une valeur "number". A moins que tu aies des raisons spécifiques d'utiliser un "number".

---- EDIT 2 -----
Sur opera 9, seule la solution d'une valeur de type length fonctionne, donc pour FF2, Safari et Opera:

body {
  /* ... */
  font: 13px/19px "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}
/*...*/
#menu ul li a.selected {
	color: #FFF;
	padding-bottom: 9px;
	text-decoration: none;
	border-bottom: 1px solid #ee1b4c;
}

Tu auras un affichage correcte.

 

[Membre supprimé 2]

Kone, je te remercie infiniment pour ton aide précieuse, je n'avais pas pensé a line height !
Merci beaucoup !