Bonjour à tous,

Je suis en train de faire un menu déroulant horizontal en css. J'indique mes largeurs en pourcentage et j'ai remarqué une différence d'interprétation de ces largeurs sous opera et ie6. La différence est suffisamment importante pour être génante. Quelqu'un a-t-il déjà remarqué cela?
Existe-t-il un moyen de s'en sortir ?
Ai-je fait une erreur quelque part?

Merci d'avance et un peu de code (piqué sur le net puis modifié) pour illustrer :

HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="menu">
       		<ul>
        		<li><a href="index.php?ad=">&nbsp;Accueil
          			<!--[if gt IE 6]><!--></a><!--<![endif]-->
          			<!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
          			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
        		</li>
      		</ul>
      		<ul>
        		<li><a href="index.php?ad=dechetSol">&nbsp;Nos agences
          		<!--[if gt IE 6]><!--></a><!--<![endif]-->
          		<!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
          			<ul>
            			<li><a href="index.php?ad=dechetSol"><img src="images/next.png" alt="" />&nbsp;Déchets solides</a></li>
            			<li><a href="index.php?ad=dechetLi"><img src="images/next.png" alt="" />&nbsp;Déchets liquides</a></li>
            			<li><a href="index.php?ad=dechetDang"><img src="images/next.png" alt="" />&nbsp;Déchets dangereux</a></li>
            			<li><a href="index.php?ad=traitement"><img src="images/next.png" alt="" />&nbsp;Traitement</a></li>
          			</ul>
          		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
        		</li>
      		</ul>
      		<ul>
        		<li><a href="index.php?ad=collecte">&nbsp;Nos métiers
          		<!--[if gt IE 6]><!--></a><!--<![endif]-->
          		<!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
          			<ul>
            			<li><a href="index.php?ad=collecte"><img src="images/next.png" alt="" />&nbsp;Collecte</a></li>
            			<li><a href="index.php?ad=assainissement"><img src="images/next.png" alt="" />&nbsp;Assainissement</a></li>
            			<li><a href="index.php?ad=nettoiement"><img src="images/next.png" alt="" />&nbsp;Nettoiement</a></li>
            			<li><a href="index.php?ad=analyse"><img src="images/next.png" alt="" />&nbsp;Analyse</a></li>
            			<li><a href="index.php?ad=traitement"><img src="images/next.png" alt="" />&nbsp;Traitement</a></li>
          			</ul>
          			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
        		</li>
      		</ul>
      		<ul>
        		<li><a href="index.php?ad=actualite">&nbsp; Actualités
          		<!--[if gt IE 6]><!--></a><!--<![endif]-->
          		<!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
          		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
        		</li>
      		</ul>
      		<ul>
        		<li><a href="index.php?ad=references">&nbsp;Références
          		<!--[if gt IE 6]><!--></a><!--<![endif]-->
          		<!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
          		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
        		</li>
      		</ul>
      		<ul>
        		<li> <a href="index.php?ad=contact">&nbsp;Contacts
          		<!--[if gt IE 6]><!--></a><!--<![endif]-->
          		<!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
          		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
        		</li>
      		</ul>
    	</div>

CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* style the outer div to give it width */
.menu {
width:100%; 
font-size:0.85em;
background:#67a656;
border-bottom:3px solid white;
margin-bottom: 1em;
height:3em;
z-index:10;
vertical-align:middle;
}
.menu img {
border:none;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
/* float the list to make it horizontal and a relative position so that you can control the dropdown menu position */
.menu li {
float:left;
width:16.666%;
position:relative;
}
.menu li li {
width:100%;
}
C'est le width:16.66% qui pose problème.