28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème mise en forme Firefox

Bonjour à tous !

Je m'arrache les cheveux sur un site avec le menu de navigation. ça s'affiche pas correctement sous firefox. Le background est tronqué. La fleur est coupée en haut et en bas?

Le CSS en question :


#main_nav {
float: left;
display: block;
background: url(images/navbar.jpg) no-repeat;
width: 818px;
height: 46px;
margin: 0px;
}

#main_nav ul {
font-family: "Verdana, Arial";
font-size: 1.1em;
line-height: 1.8em;
margin: 0;
padding: 0;
text-align: center;
padding-top: 5px;
}

#main_nav ul li {
list-style-type: none;
display: inline;
}

#main_nav ul li a:link, #main_nav ul li a:visited {
text-decoration: none;
display: inline;
background: url(images/flower1.png) no-repeat left center;
padding-left: 35px;
padding-right:15px;
color: #fff;
font-weight: bold;
}

#main_nav ul li a:hover, #main_nav ul li a.current {
background: url(images/flower2.png) no-repeat left center;
text-decoration: none;
padding-left: 35px;
padding-right:15px;
color: #df9d52;
font-weight: bold;
}


Sous Safari 3 ça donne :

upload/14674-1a.jpg

Sous Firefox 2 ça donne :

upload/14674-2a.jpg

Merci d'avance pour votre aide
Modifié par TomC (07 Nov 2007 - 20:54)
Bonjour,

Peut-être une problème de hauteur de ligne?
De toute évidence, ça n'est pas l'image de fond qui est tronquée, mais le fond qui est trop étroit.

Il semblerait qu'avec Safari 3 (beta) la hauteur de ligne soit héritée, mais pas dans Firefox 2. Il faudra peut-être préciser une line-height: ...; directement pour #main_nav ul li a.
Dans ce cas,

Question: on peut voir la page (là, on n'a pas vraiment tous les éléments...)?
Il semblerait que le line-height prenne bien... mais que la hauteur des éléments en display: inline n'en tienne pas compte sous Firefox. Augmenter la hauteur de ligne d'un élément en-ligne semble augmenter la hauteur de la boite de ligne qui porte l'élément (ou des boites de ligne qui portent l'élément, quand celui-ci est sur plusieurs lignes), mais pas augmenter la hauteur de l'élément lui-même.

En tout cas, c'est le cas avec Firefox 2 et Opera 9. Je ne sais pas si c'est conforme à la spécification ou pas. Il se peut que celle-ci soit muette à ce sujet.

Solution: utiliser du padding:
#main_nav ul li a {
padding: 5px 15px 5px 35px;
}

Modifié par Florent V. (07 Nov 2007 - 17:56)
Sujet clos
Aller à