Image background dans li

Bonjour à tous,
J'ai construit un menu en liste horizontal qui au passage de la souris génère une petite flèche sous chaque li.
Une fois que l'on a cliqué, l'on reste avec la petite fleche en dessous.
Sur Firefox ca marche super.
Sous IE 6,7,8 la fleche reste à la limte de la hauteur des li que je n'arrive pas à modifier.
Voici le CSS:

#menu li{
display: inline;
list-style: none;
line-height: 40px;
font: 20px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-decoration : none;
} 

#menu a{
text-decoration : none;
margin-left: 20px;
}

.actif_accueil {
color: #ffcdcd;
margin-left: 20px;
background: #242424 url(img/spot.png) center center no-repeat;
}

#menu li.accueil a{
color: #f3a5a5;
margin-left: 20px;
}

#menu li.accueil a:hover{
color: #ffcdcd;
margin-left: 20px;
background: #242424 url(img/spot.png) no-repeat center center;
}

ce qui donne:
Merci pour vos idées

Modifié par dany3d (15 Dec 2009 - 18:22)

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Salut,

Sur ton image, à gauche ce que tu veux faire, à droite ce que tu obtiens, c'est bien ça ?

Ok, merci c'est fait.
Mon bouton code ne marche pas sur mon firefox donc j'ai mis les balises à la main.
Pour mon probleme:
L'image de gauche est ce qu'on a sur firefox ce que je veux
L'image de droite est ce qu'on a sur IE 6 7 8
Je ne sais pas pour safari

Merci

Salut Dany!

Voilà un menu horizontal, avec une image tout comme tu veux. Je suis reparti de 0, mais avec une structure qui me semble proche de la tienne. testé sous safari 4, FF3 et IE7.

<ul id="menu">
    <li><a href="?p=liens1">liens1</a></li>
    <li><a href="?p=liens2">liens2</a></li>
    <li><a href="?p=liens3">liens3</a></li>
    <li><a href="?p=liens4">liens4</a></li>
    <li><a href="?p=liens5">liens5</a></li> 			 		
</ul>

<div class="main">
     Main
</div>

.main
{
    width: 100%;
    height: 500px;
    background: #CCC;   
}

ul#menu
{
    width: 100%;
    height: 30px;
    margin: 0;  
}

ul#menu li
{
	display: inline;
	list-style-type: none;
	float: left;
	text-align: center;
	margin-left: 10px;
	height: 100%;
}

ul#menu li a
{
	display: block;
	color: #000;
	font-size: 20px;
	height: 100%;
	float: left;
}

ul#menu li a:hover
{
	text-decoration: none;
	border: none;
	color: #333;
	background: url("img/spot.png") bottom center no-repeat;
}

.actif
{
	text-decoration: none;
	border: none;
	color: #333;
	background: url("img/fr.png") bottom center no-repeat;
}

Merci de ton aide,
mais le probleme reste le meme sur ie8
j'ai modifié un peu le code du coup ca marche sur firefox 3.5, un peu moins bien sur ie6 7 mais pas sur le 8
voila mon code css:

* { margin: 0; padding: 0; outline: 0 }

img {
border : 0;
}

body {

background: #fff;

font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

color: #242424; 

	

}
#header {
width: 800px;
height: 130px;
background: #242424;
margin-left: auto;
margin-right: auto;
}
#logo {
background: #242424;
width: 100%;
}
#menu {
height: auto;
width: 100%;
background: #242424;
text-align: center;
}

#menu li{
margin-bottom: 10px;
display: inline;
list-style: none;

font: 20px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-decoration : none;

} 

#menu a{
text-decoration : none;
margin-left: 20px;

}

.actif_accueil {

color: #ffcdcd;
margin-left: 20px;
background: #242424 url(img/spot.png) center center no-repeat;


}

#menu li.accueil a{
color: #f3a5a5;
margin-left: 20px;

}

#menu li.accueil a:hover{
color: #ffcdcd;
margin-left: 20px;
background: #242424 url(img/spot.png) no-repeat center center;

}

le resultat en image sur firefox,ie7,ie8
le rollover passe le triangle sous le lien.
merci

Modifié par dany3d (17 Dec 2009 - 21:45)

Je ne sais pas trop quoi te dire, et les problèmes de compatibilité sont vraiment relou. Je crois que celui ou celle qui nous amène une solution miracle (comme brûler les développeurs de IE ?) deviendra riche.

En attendant, il y a une solution de contournement :
http://msdn.microsoft.com/fr-fr/ie/cc963662.aspx (trouvé ici ).
En gros, l'idée est de forcer IE8 à se comporter comme IE7 quand il arrive sur le site. Du coup, nos solutions marcheraient

Merci beaucoup!
C'est super, ça contourne le problème, mais j'en ai marre de me prendre la tête.
Le top ça serait d'obliger le navigateur hôte à utiliser le rendu de Firefox!...mais faut pas rêver!