Problème d' affichage des images du menu sous IE [RESOLU]

Bonjour,
j' ai crée un menu sur mon site qui est desitné à remplacer mon menu actuel en flash.
Si tout marche bien sous FF, sous IE les images qui servent de fond à mes liens apparaissent et disparaissent lorsque l' on passe la souris dessus.
C' est très moche et je ne sais pas d' où vient le problème.
Voici un lien vers le menu:
http://chrisllers.free.fr/tests/test.php
et le code html:

<ul id="menu">
				<li id="bouton-gauche"><a href="" title="">Accueil</a></li>
				<li class="bouton-milieu"><a href="" title="">Videos</a></li>
				<li class="bouton-milieu"><a href="" title="">Audio</a></li>

				<li class="bouton-milieu"><a href="" title="">Windows</a></li>
				<li class="bouton-new"><a href="" title="">Internet Réseaux</a></li>
				<li class="bouton-milieu"><a href="" title="">Astuces Diverses</a></li>
				<li class="bouton-milieu"><a href="" title="">Comment ça marche</a></li>
				<li class="bouton-milieu"><a href="" title="">Lexique</a></li>
				<li id="bouton-droit"><a href="phpBB2.php" title="">Forum</a></li>

			</ul>

et le code CSS:

#menu
{
white-space:nowrap;
font-size:100%;
margin:0;
padding:0;
text-align:center;
}
#menu li
{
float:left;
list-style:none;
}
.bouton-milieu a
{
background-image:url(photos/menu/fond-menu.png);
background-repeat:repeat x;
background-position:center;
text-decoration:none;
padding-top:15px;
padding-bottom:13px;
padding-left:15px;
padding-right:15px;
}
.bouton-milieu a:hover
{
text-decoration:underline;
color:white;
background-image:url(photos/menu/survole.png);
background-repeat:repeat x;
}
.bouton-new a
{
background-image:url(photos/menu/bouton-new.png);
text-decoration:none;
padding-left:50px;
padding-right:15px;
padding-top:15px;
padding-bottom:13px;
}
.bouton-new a:hover
{
text-decoration:underline;
color:white;
background-image:url(photos/menu/bouton-new-survole.png);
background-repeat:repeat x;
}
#bouton-gauche a
{
text-decoration:none;
padding-top:15px;
padding-bottom:13px;
padding-left:20px;
padding-right:20px;
background-image:url(photos/menu/bouton-gauche.png);
background-position:left;
}
#bouton-gauche a:hover
{
color:white;
text-decoration:underline;
background-image:url(photos/menu/bouton-gauche-survole.png);
}
#bouton-droit a
{
text-decoration:none;
padding-top:15px;
padding-bottom:13px;
padding-left:20px;
padding-right:20px;
background-image:url(photos/menu/bouton-droit.png);
background-position:right;
}
#bouton-droit a:hover
{
color:white;
text-decoration:underline;
background-image:url(photos/menu/bouton-droit-survole.png);
background-position:right;
background-repeat:no-repeat;
}

Merci !
Modifié par chrisllers (13 Aug 2008 - 22:19)

Bonjour,

Je ne comprends pas bien ton problème, ou alors je n'arrive pas à le reproduire (testé sous IE7 - IE6 - FF2).

Par défaut, j'ai un fond bleu pétrol sur les onglets du menu.
Au passage de la souris, le fond devient plus clair.

Ce comportement est normal puisque c'est celui défini dans la feuille de style avec la propriété :hover.

Le seul problème que je vois sous IE, c'est que l'image de fond change au passage de la souris sur le texte du lien, et pas sur la totalité de l'onglet.

Je te conseille de mettre un float:left au lieu de display:inline sur tes listes (#menu li).
Cela permettra d'étendre la zone réactive à la totalité de l'onglet, et plus au texte seul.
Cela corrigera aussi l'espace que tu as entre tes listes qui est dû à l'association [ display:inline + saut de ligne dans le code HTML ]

Bonjour
et merci beaucoup de l' astuce que tu m' as donnée, c' est vrai que c' est beaucoup plus joli comme ça.
Par contre la modification que tu m' as donnée entraîne un problème sous IE;
l' image ne recouvre que la taille de mon texte, du coup on ne voit plus la totalité de l' image de mon menu.
voici le lien:
http://chrisllers.free.fr/tests/test.php
j' ai essayé de mettre un height sur le menu, les li et les liens mais ça ne change pas.
Sous FF et Opera pas de problème.
Le problème initiale sous IE est le suivant:
lorsque je passe la souris sur le menu, l' image initiale disparait et l' image survolée apparaît mais une fraction de seconde plus tard. Du coup il y a un "noir" entre les deux. C' est plus clair ?
EDIT:
j' ai capturé une petite démo consultable ici:
http://chrisllers.free.fr/tests/demo.html
Modifié par chrisllers (13 Aug 2008 - 20:29)

chrisllers a écrit :
Bonjour
et merci beaucoup de l' astuce que tu m' as donnée, c' est vrai que c' est beaucoup plus joli comme ça.
Par contre la modification que tu m' as donnée entraîne un problème sous IE;
l' image ne recouvre que la taille de mon texte, du coup on ne voit plus la totalité de l' image de mon menu.

Au temps pour moi, j'ai oublié de préciser qu'il fallait ajouter la propriété display:block sur tes liens pour que la taille soit adaptée à celle de ton image.

#menu li a {
	display:block;
}

Pour le scintillement des images, est-ce que par hasard tu utilises IE6 ?

Il existe un bug IE6 qui fait que le navigateur fait systématiquement appel au serveur pour récupérer les images au lieu de passer par son cache.
Le temps de latence provoque cet effet désagréable.

a écrit :


Il existe un bug IE6 qui fait que le navigateur fait systématiquement appel au serveur pour récupérer les images au lieu de passer par son cache.
Le temps de latence provoque cet effet désagréable.

je pensais à ça aussi, j' utilise une vieille version de maxthon la 1.6.3 mais ce qui est étrange c' est que sur un autre ordi qui a la même version de maxthon ça ne le fait pas.
enfin, j' espère que c' est propre à ma config.
En tout cas, je te remercie car mon menu est maintenant nikel !!
http://chrisllers.free.fr/tests/test.php
Et bravo car j' envie beaucoup tes compétences


merci beaucoup pour ton aide !!
Modifié par chrisllers (13 Aug 2008 - 22:13)