Background-color dans un menu sous Internet Explorer

Bonjour a tous, un petit bug avec internet explorer incompréhensible pour ma part, mais bon c'est IE donc on peut s'attendre a tout, si quelqu'un aurait une idée, ou solution ?

<ul id="menu">
  <a href="./index.php"><li class="sub">Lien 1</li></a>
  <a href="./index.php?page=1"><li>Lien 2</li></a>
  <a href="./index.php?page=2"><li>Lien 3</li></a>
</ul>

ul#menu {
	width:193px;
	list-style-type:none;
	margin-top:5px;
	padding-left:10px;
}

li {
	background-color:#666666;
	margin-top:2px;
	color:#FFFFFF;
	padding-left:10px;
	font-weight:bold;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}

li:hover {
	background-color:#333333;
	padding-left:20px;
}

li.sub {
	background-color:#333333;
	padding-left:20px;
}

Le problème est que sous Internet Explorer le Background-color des <li> n'apparait pas ... mais sous Firefox tout marche bien ^^

Donc si quelqu'un peut m'aider, merci.

Salut,

Je n'ai aucun souci avec ce code et IE. Le fond s'affiche bien. Essaie peut-être de mettre un layout à tes li, par exemple en leur mettant width:100%.

Bonjour,

Je suppose que par IE, tu veux dire IE6 (les problèmes ne sont pas les même entre toutes les version d'IE, il faut donc préciser). Et que le problème de background est lié au survol.

C'est "normal", IE6 ne sait appliquer la pseudo classe :hover qu'au éléments "<a>". Le :hover étant appliqué à <li>, IE6 l'ignore.

Pour réaliser l'effet que tu souhaite, tu va devoir appliquer le style pour :hover à "li a:hover" et en ajoutant un "display:block;".

<ul id="menu">
  <a href="./index.php"><li class="sub">Lien 1</li></a>
  <a href="./index.php?page=1"><li>Lien 2</li></a>
  <a href="./index.php?page=2"><li>Lien 3</li></a>
</ul>

Mis à part les judicieuses remarques sur la pseudo-classe hover et son problème de support par IE6 (et dans une certaine mesure IE7) ce qui pose surtout problème ici c'est la structure de ton menu...

A lire :
Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
Créer des menus simples en CSS
Un petit outil très sympa (developpez.com)

Démarrer avec un code sain pourra certainement faciliter la mise en forme

Cdt,
Sylvain