Menu défaillant sous IE6

Bonjour

je me permets de faire appel à vous car j'ai un soucis avec mon menu sous IE6. Il s'affiche parfaitement sous FF et IE7(après débuggage) mais sous IE6 c'est l'enfer: pas de lien, le hover passe très mal

voici mon code html

<div id="menu">
                	<ul>
                    	<li>
                        	<a href="#">
                            	<span class="menu_gauche">&nbsp;</span>
                                <span class="menu_centre">Accueil</span>
                                <span class="menu_droite">&nbsp;</span>
                                <span class="menu_bas">&nbsp;</span>
                            </a>
                        </li>
</ul>
</div>

voici mon css

#menu {
margin:0;
padding-top:13px;
height:84px;
width:623px;
overflow:hidden;
float:left;
clear:both;
}


#menu ul {
padding:0;
margin:0;
list-style-type:none;



}
#menu ul li{
float:left; /*pour IE*/

}
#menu ul li a{


float:left;   
margin-right:3px;
margin-top:3px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}


ul li a span.menu_gauche{
float:left;
height:40px;
background-image:url(../images/menu_gauche.jpg);
background-repeat:no-repeat;
background-position:left bottom;
width:7px;

}

ul li a span.menu_centre{
float:left;
height:32px;
padding-left:7px;
padding-right:7px;
padding-top:8px;
background-image:url(../images/menu_centre.jpg);
background-repeat:repeat-x;
background-position:left bottom;
position:relative;

}
ul li a span.menu_droite{
float:left;
height:40px;
background-image:url(../images/menu_droit.jpg);
background-repeat:no-repeat;
background-position:left bottom;
width:6px;

}


ul li a:hover span.menu_gauche{

height:40px;
background-image:url(../images/menu_gauche_hover.jpg);
background-repeat:no-repeat;
background-position:left top;
width:7px;
margin-top:0px;


}

ul li a:hover span.menu_centre{

height:32px;
padding-left:7px;
padding-right:7px;
padding-top:8px;
background-image:url(../images/menu_centre_hover.jpg);
background-repeat:repeat-x;
background-position:left top;
position:relative;




}
ul li a:hover span.menu_droite{

height:40px;
background-image:url(../images/menu_droit_hover.jpg);
background-repeat:no-repeat;
background-position:left top;
width:6px;



}

ul li a span.menu_bas {
	display:none;
}
ul li a:hover span.menu_bas {
	display:block;
}

ul li a span.menu_bas, 
ul li a:hover span.menu_bas{

height:8px;
width:100%;
background-image:url(../images/fleche_menu.jpg);
background-repeat:no-repeat;
clear:both;
background-position:center top;

}

merci pour votre aide

personne n'a une petite idée??

Bonjour,

J'ai une vague idée de ce que tu tentes de faire, et il me semble que ce n'est pas la bonne méthode...mais je peux me tromper, c'est pourquoi il vous est demandé d'être le plus explicite possible lors de l'exposition de vos problèmes...

Je te propose un peu de lecture pour la partie menu et un exemple de création de "boite"

Si cela ne répond pas à ta problématique, merci de repréciser ton besoin par le biais d'une page en ligne, d'un croquis/image explicatif, ou en reformulant l'exposé des soucis rencontrés...nos dons de divination ont malheureusement leurs limites

Cdt,
Sylvain

Salut dedel53chipie,

Apparement c'est un bug d'ie 6 (encore une fois). si tu n'es pas allérgique à l'anglais, tu trouvera un début de réponse sur ce site. Mais je sais pas si sa peut s'appliquer à la manière dont tu souhaite réaliser ton menu.

edit:

Just une remarque supplémentaire, ton menu est invisible lorsque l'on a pas les images (se qui sera le cas de tout ceux qui essayeront de t'aider, moi compris).. je te conseil donc de revoir un peu les couleurs de ton menu (genre d'y ajouter une background-color ), se qui sera aussi un plus pour l'accessibilité de ton menu.
Modifié par Mikerob (18 Mar 2009 - 11:04)