différence d'affichage entre navigateur dans le CSS
Bonjour,
Je vous écris pour vous faire part d'un problème de différente d'affichage entre Explorer et Firefox que j'ai rencontré récemment lié au CSS. Je vous présente le script et ensuite vous parle du dit problème.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style type="text/css">
a: {color: #CBA300;}
a:link { color: #CBA300; display: block; text-decoration: none;}
a:visited { color: #CBA300; display: block; text-decoration: none;}
a:hover {
color: #ffffff;
background-color: #565553;
text-decoration: none;
display: block;
width: 116px;
height: 18px;
}
.c12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style> |
Cette feuille de styles est utilisée pour un menu de navigation verticale, placé dans un tableau, et dont chaque lien est dans une cellule.
Avec Explorer :
- Le survol des liens en une seule ligne (sans retour <br>) fait remonter le texte d'un pixel.
- Le survol des liens en 2 lignes (avec un retour <br>) s'effectue correctement.
Avec Firefox :
- La couleur du lien dans l'état hover (survol) ne devient pas blanc (#FFFFFF) mais reste jaune moutarde (#CBA300) comme l'état link.
- Le survol des liens en une seule ligne (sans retour <br>) fait remonter le texte d'un pixel.
- Lors du survol des liens en 2 lignes (avec retour <br>), le block d'arrière-plan (#565553) ne s'affiche que sur la première ligne. Plus grave encore, la hauteur de la cellule diminue comme si tout ce qui se trouve après le saut de ligne (<br>) n'existait pas.
Il vous est possible de voir directement le résultat à cette adresse
Merci à ceux qui répondront.
