<li> en ligne avec IE

Bonjour,

J'ai un petit problème avec un code CSS et IE que je n'arrive pas à resoudre et je sollicite votre aide
Dans le cadre d'un menu, je souhaite afficher des <li> en ligne. Sous firefox, cela ne pas de problème, mais sous IE, c'est la cata, cela s'affiche... en colonne !

Voici le code qui pose problème :

<style type="text/css">
.menu {width:520px; height:25px; position:relative; margin:0; background:#f4f7dc; font-size:8px;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; padding:0 0 0 5px; height:25px; line-height:25px; color:#000; }

.titre_menu {display:block; padding:0 0 0 0px; height:25px; line-height:25px; color:#000; background:#c9c9a7;font-size:9px;text-align:center;}
.titre_menu2 {display:block; width:75px; padding:0 0 0 0px; height:25px; line-height:25px; color:#000; background:#e39561;font-size:10px;font-size:9px;text-align:center;}
.titre_menu3 {display:block; width:65px; padding:0 0 0 0px; height:25px; line-height:25px; color:#000; background:#e5e5be;font-size:10px;font-size:9px;text-align:center;}

.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

.menu ul li ul {visibility:hidden; position:absolute; top:25px; left:0; }
.menu ul li ul li{width:98px;}

/* Niveau 2*/
.menu ul li:hover ul,
.menu ul li a:hover ul { width:520px;background:#f4f7dc; color:#fff;}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:25px; }

.menu ul li ul li a, .menu ul li a ul li a {display:inline; background:#e5e5be; color:#000000;font-size:10px;text-align:center;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#e8955d; color:#FFFFFF;}


</style>
<script>
function myparc_menu_aff(categorie){

// Catégorie principale
for(var i=1;i<3;i++) {
	if (i != categorie){
		document.getElementById("myparc_menu_"+i).style.visibility='hidden';
		document.getElementById("myparc_menu_main_"+i).style.background='#c9c9a7';
		document.getElementById("myparc_menu_main_"+i).style.color='#000000';
	}
}


document.getElementById("myparc_menu_main_"+categorie).style.background='#e86b19';
document.getElementById("myparc_menu_main_"+categorie).style.color='#FFFFFF';

document.getElementById("myparc_menu_"+categorie).style.visibility='visible';
}

</script> 
<div class="menu">
	<ul>
		<li><div class="titre_menu" style="background: rgb(201, 201, 167) none repeat scroll 0% 0%; width: 80px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0);" id="myparc_menu_main_1" onmouseover="myparc_menu_aff('1');"><b>MAINT_CAT</b></div>
			<ul style="visibility: hidden;" id="myparc_menu_1">
				<li style="width: 80px;"><a href="url">Cat_1</a></li>
				<li style="width: 80px;"><a href="url">Cat_2</a></li>
				<li style="width: 80px;"><a href="url">Cat_3</a></li>
				<li style="width: 100px;"><a href="url">Cat_4</a></li>
				<li style="width: 80px;"><a href="url">Cat_5</a></li>
			</ul>
		</li>

		<li><div class="titre_menu" style="background: rgb(232, 107, 25) none repeat scroll 0% 0%; width: 80px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 255, 255);" id="myparc_menu_main_2" onmouseover="myparc_menu_aff('2');"><b>MAIN_CAT</b></div>
			<ul style="visibility: visible;" id="myparc_menu_2">
				<li><a href="url">Cat_1</a></li>
				<li><a href="url">Cat_2</a></li>
				<li><a href="url">Cat_3</a></li>
				<li><a href="url">Cat_4</a></li>
				<li><a href="url">Cat_5</a></li>
			</ul>
		</li>
	</ul>
</div>

Ce que je n'arrive pas à comprendre c'est que la premiere ligne de <li> s'affiche bien en ligne, mais les <li> de la ligne 2 s'affichent en colonne.

Pourriez vous m'aider ?

Merci

Cordialement

François
Modifié par francois10 (23 Jun 2009 - 09:49)

Hello francois10 et bienvenue ,

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 après le crochet ouvrant).



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

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Voila voila
J'en ai également profité pour simplifier le code pour l'exemple !

Merci

François

Hello,

Il y a un bug dans IE pour les li, essaie de les coller les uns aux autres dans ton html comme ceci :

<ul>
     <li></li><li></li><li></li><li></li><li></li>
</ul>

Ca devrait résoudre le problème.
Modifié par Skoua (23 Jun 2009 - 12:18)

Effectivement ça semble avoir réglé le problème.
Merci ! J'aurais clairement jamais pensé à ça.