width en pourcentage

Version imprimable

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:

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:

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.

29/07/2008, 09h46
Bisûnûrs

As-tu un DOCTYPE complet et valide ?

Au passage, les menus sur Cssplay sont certes des prouesses CSS, mais je ne pense pas qu'il faille les utiliser en production, d'autant plus qu'à ma connaissance celui-ci n'est pas effectif sur Opera.
29/07/2008, 10h19
Candygirl

Le problème avec opera c'est qu'il n'interprète que les valeurs rondes de pourcentage. 50% ou 50.9% c'est du kiff pour lui, il interprète comme 50%.

De toute manière si le but est de placer 6 boutons côtes à côtes et occuper le 100% de la place à disopsition, il n'y aura guère que sur les navigateurs basés sur gecko qui t'afficheront un rendu correct quel que soit la largeur de la fenêtre.

Sur IE tu auras la plus part du temps des boutons sur 2 lignes et sur safari un espace après les boutons vu leur différente politique concernant les arrondis.
29/07/2008, 11h00
Dude1205

Merci beaucoup pour vos réponses.

Citation:

As-tu un DOCTYPE complet et valide ?

Je ne pense pas que ce soit un probleme de doctype, il semble que ce soit les valeurs arrondies des pourcentages de opera.

Citation:

les menus sur Cssplay sont certes des prouesses CSS, mais je ne pense pas qu'il faille les utiliser en production

Je pensais pouvoir l'adapter sans trop de problèmes à mon cas, pourquoi me les déconseilles-tu ? Vaut-il mieux utiliser quelque chose à base de javascript ?

Citation:

si le but est de placer 6 boutons côtes à côtes et occuper le 100% de la place à disopsition, il n'y aura guère que sur les navigateurs basés sur gecko qui t'afficheront un rendu correct quel que soit la largeur de la fenêtre

C'est bien mon but en effet. N'y a-t-il pas une solution à ce problème?

Merci encore

Citation:

Envoyé par Dude1205

N'y a-t-il pas une solution à ce problème?

Pour éviter les problème sur IE le mieux est de laisser une dimensions libre afin d'absorber les différences. C'est possible en évitant de donner une dimension au dernier des éléments et en supprimant son flottement.

L'idéal serait de jouer sur les pseudo-classe :first-child et :last-child pour éviter d'attribuer des classes mais malheureusement seul :first-child est reconnu sur IE7.

Je pense que j'opterais pour ce genre de compromis:
Code:

1 2 3 4 5 6 7 8 <ul> <li style="background:#888;">menu1</li> <li style="background:#999;">menu2</li> <li style="background:#aaa;">menu3</li> <li style="background:#bbb;">menu4</li> <li style="background:#ccc;">menu5</li> <li id="last" style="background:#ddd;">menu6</li> </ul>
Code:

1 2 3 4 5 * {margin:0;padding:0;} ul {list-style:none;} li {width:17%;float:left;} li:first-child {width:16%;} #last {float:none;width:auto;}
Ce qui nous donne le premier et dernier élément avec une largeur de 16%, les 4 autres à 17% et avec le dernier qui peut absorber les différences de pixels dues aux arrondis.

29/07/2008, 13h59
Dude1205

Merci pour ta solution candygirl.
Je vais faire ca plutot que de centrer la liste, ce sera plus propre.
29/07/2008, 14h03
Candygirl

Si les aditions de tes pourcents font un total de 100% et que le conteneur n'a pas de taille fixe tu auras forcément des passages sur 2 lignes avec IE et un espace sur safari à certaines largeurs du conteneur.
29/07/2008, 14h05
Dude1205

Zut, je viens de modifier mon message précédent en voyant ta réponse :)
peu importe, j'adopte ta solution.
J'avais fait attention à ne pas mettre un total de 100%, je n'avais pas mis de marge à droite.
Merci encore et bonne fin de journée