Problème IE7 avec menu vertical en ul/li et fonds d'items en image

bonjour,

je tente de créer un menu vertical en utilisant les listes. (tutoriels du site listamatic).

j'ai besoin d'un menu à deux niveaux. les boutons de premier niveau ont un fond en image (jpg). les boutons de second niveau ont simplement un fond en applat de couleur.

le menu se "déroule" très bien sous FFX et IE6. j'ai cependant de gros problèmes avec IE7 qui semble ne pas vouloir tenir compte du sous-menu qui vient se superposer au reste.

voici pour vous 3 exemples en ligne, pour vous permettre de mieux visualiser le problème :

sous FFX: http://cmlien.free.fr/www/pages/home.html
sous IE6: http://cmlien.free.fr/www/pages/ie6_home.html
sous IE7: http://cmlien.free.fr/www/pages/ie7_home.html

merci d'avance pour votre aide.
Modifié par -Frank (05 Dec 2006 - 10:36)

et le code css :

code de base (FFX)

#navcontainer {
	width: 220px; 
	margin: 0; 
	padding: 0; 
	background: #000098; /*#0e0fcb; /*#7b7aca; /*#000098;*/
}

#navcontainer ul
{
	width: 220px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navcontainer li {
	width: 172px; /*220px;*/
	height: 31px; /*33px;*/ 
	display: table;
	background: url(../media/front/menu_item.jpg) no-repeat;
	font-weight: bold; 
	text-transform: uppercase;
	padding-top: 2px;
	padding-left: 10px;
	padding-right: 38px;
	margin-bottom: 0;
}

#navcontainer a
{
	width: 172px; /*220px;*/
	height: 31px; /*33px;*/ 
	display: table;
	color: #FFF;
	text-decoration: none;
}

#navcontainer a:hover
{
	width: 172px; /*220px;*/
	height: 31px; /*33px;*/ 
	display: table;
	color: #ffd800;
	text-decoration: none;
}

#navcontainer ul ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 172px; /* changer cette valeur suivant le navigateur pour jouer sur la largeur du menu */
	margin-right: 0;
}

#navcontainer ul ul li { 
	width: auto;
	height: auto; /*33px;*/ 
	padding-right: 0px;
	padding-bottom: 6px;
	background: #000098; /*#0e0fcb; /*#7b7aca; /*#000098;*/
	text-transform: none;
}

#navcontainer ul ul a
{
	height: auto; /*33px;*/ 
	display: table;
}

#navcontainer ul ul a:hover
{
	height: auto; /*33px;*/ 
	display: table;
}

surchargé par du code spécifique à IE6

#navcontainer li {
	margin-bottom: -2px;
}

#navcontainer a
{
	display: block;
}

#navcontainer a:hover
{
	display: block;
}

#navcontainer ul ul{
	/* changer cette valeur suivant le navigateur pour jouer sur la largeur du menu */
	width: 220px;
	margin-right: -48px;
}

#navcontainer ul ul li { 
	padding-right: 20px;
	padding-bottom: 8px;
}

#navcontainer ul ul a
{
	display: block;
}

#navcontainer ul ul a:hover
{
	display: block;
}

surchargé par du code spécifique pour IE7

#navcontainer a
{
	position: relative; /* fait apparaitre les menus sous IE7 */
	/* display: block; et height: 33px; pour fixer la hauteur des boutons */
	display: block;
	height: 33px;
}

#navcontainer a:hover
{
	position: relative; /* fait apparaitre les menus sous IE7 */
	/* display: block; et height: 33px; pour fixer la hauteur des boutons */
	display: block;
	height: 33px;
}

#navcontainer ul ul{
	/* changer cette valeur suivant le navigateur pour jouer sur la largeur du menu */
	width: 210px;
	margin-right: -48px;
	/*position: relative;*/ /* <- ELLE EST PEUT-ÊTRE LA LA SOLUTION!!! fait s'afficher le sous menu, mais passe par dessus le reste */
}

#navcontainer ul ul li { 
	padding-right: 20px;
	padding-bottom: 8px;
	position: relative;
}

#navcontainer ul ul a
{
	display: block;
}

#navcontainer ul ul a:hover
{
	display: block;
}

et le html (beaucoup plus léger)

<!-- debut navigation -->
			<div id="navcontainer">
				<div class="menu-header"><h2></h2></div>
				<ul id="navlist">
					<li><a href="#">item01</a>
						<ul id="subnavlist">
							<li><a href="#">Subitem one</a></li>
							<li><a href="#">Subitem two</a></li>
							<li><a href="#">Subitem three un peu plus long pour voir...</a></li>
							<li><a href="#">Subitem four</a></li>
						</ul>
				
					</li>
					<li><a href="#">item02</a></li>
					<li><a href="#">item03</a></li>
					<li><a href="#">item04</a></li>
					<li><a href="#">item05</a></li>
					</ul>
				</div>
			<!-- fin navigation -->

un petit up car je n'ai toujours pas trouvé de solution... :'(

J'ai le mm problème avec des css ...

Si qqun a une solution je suis preneur aussi

Axv21
Modifié par Axv21 (19 Dec 2006 - 23:20)