Menu vertical - rendu instable avec IE6

**devyan** · 07/11/2008, 01h33

J'ai commencé un menu déroulant vertical, tout va bien avec FF2 et 3, OPERA 9.5 et SAFARI 3. J'ai effectué de petits ajustements de présentation pour IE7 mais avec IE6 j'obtiens un comportement plus que bizarre.

1/ il y a des décalages dans le rendu vertical : le texte des items du sous-menu apparaissent 1pixel trop bas lors de l'affichage initial ce qui décale tous les éléments suivants (cf. pièce jointe : IE6 à gauche, FF à droite)

2/ (encore plus étrange) lors du survol d'un item je modifie la couleur de fond et là le texte se positionne correctement MAIS les éléments suivants sont à nouveau décalés.

voici le 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#menu .level1 {
	position: relative; 
	list-style: none outside none; line-height: 0; font-size: 0;
	margin: 0px 0px 1px 0px; padding: 0px 0px 5px 0px; 
	overflow: hidden; vertical-align: bottom;}
#menu .level1 .item1 {
	position: relative; 
	margin: 0px 0px 0px 0px; padding: 0px 20px 0px 5px; vertical-align: baseline;
	font-family: Tahoma, Arial; font-size: 11px; font-weight: bold; line-height: 16px; height: 16px; text-align: center;}
#menu .level1 .subitems {
	position: relative; 
	line-height: 0; font-size: 0;
	overflow: hidden; vertical-align: baseline;
	border-top-style: solid; border-top-width: 1px; 
	border-bottom-style: solid; border-bottom-width: 1px;  
	margin: 0px 1px -1px 1px; padding: 0px 0px 0px 0px;}
#menu .level1 .subitems .level2 {
	list-style: none outside none; 
	line-height: 0; font-size: 0;
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; 
	overflow: hidden; vertical-align: top; /*display: none;*/}
#menu .level1 .subitems .level2 .item2 {
	margin: 0px 1px; vertical-align: baseline;
	font-size: 0; vertical-align: top; 
	border-left-style: solid; border-left-width: 1px; 
	border-right-style: solid; border-right-width: 1px; 
	border-bottom-style: solid; border-bottom-width: 1px;}
#menu .level1 .subitems .level2 .item2 span,
#menu .level1 .subitems .level2 .item2 a {
	display: block; width: auto; top: 0;
	padding: 0px 5px; 
	font-family: Tahoma, Arial; text-decoration: none; line-height: 12px; height: 12px; font-size: 10px; vertical-align: top; text-align: left; color: black;}
 
/* ---- Ajustement spécifiques IE7 ------------------------------------------------- */
*+html #menu .level1           {padding: 0px 0px 4px 0px; min-height: 18px; } 
*+html #menu .level1 .subitems {margin-bottom: 0px; font-size: 0.01em;}
*+html #menu .level1.empty     {min-height: 16px;}
 
/* ----  Personnalisation par défaut ---------------------------------------------- */
#menu .level1 {background-color: #7E7E7E;}
#menu .level1 .item1 {background-color: #7E7E7E; color: white;}
#menu .level1 .subitems {border-top-color: #0A0A0A; border-bottom-color: #CDCDCD;}
#menu .level1 .subitems .level2 .item2 {
	border-bottom-color: #777777; border-left-color: #777777; 
	border-right-color: #777777; background-color: #BFBFBF; color: black;}
#menu .level1 .subitems .level2 .item2 span,
#menu .level1 .subitems .level2 .item2 a {color: black;}
#menu .level1 .subitems .level2 .item2 a:hover {background-color: #DADADA; padding-left: 10px;}

et un exemple html

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
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
58
59
60
61
	    <div id="menu" style="position: absolute; top: 30px; left: -120px; height: 400px; width: 151px;">
		  <ul class="level1 rouge">
			<li class="item1"><span>menu 1</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#1-1">item 1-1</a></li>
					<li class="item2"><a href="#1-2">item 1-2</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 bleu">
			<li class="item1"><span>menu 2</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#2-1">item 2-1</a></li>
					<li class="item2"><a href="#2-2">item 2-2</a></li>
					<li class="item2"><a href="#2-3">item 2-3</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 empty bleu">
			<li class="item1"><span>menu 3</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#3-1">item 1-1</a></li>
					<li class="item2"><a href="#3-2">item 1-2</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 ">
			<li class="item1"><span>menu 4</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#4-1">item 4-1</a></li>
					<li class="item2"><a href="#4-2">item 4-2</a></li>
					<li class="item2"><a href="#4-3">item 4-3</a></li>
					<li class="item2"><a href="#4-4">item 4-4</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 vert">
			<li class="item1"><span>menu 5</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#5-1">item 5-1</a></li>
					<li class="item2"><a href="#5-2">item 5-2</a></li>
					<li class="item2"><a href="#5-3">item 5-3</a></li>
					<li class="item2"><a href="#5-4">item 5-4</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 jaune">
			<li class="item1"><span>menu 6</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#6-1">item 6-1</a></li>
					<li class="item2"><a href="#6-2">item 6-2</a></li>
				</ul>
			</li>
		  </ul>
		</div>

J'ai essayé différentes valeurs de DocType mais cela ne semble pas provenir de là.

Merci d'avance...

**c_s_s** · 07/11/2008, 11h37

Bonjour,

Les marges intérieures et extérieures ainsi que les bordures placées sur certains éléménts (ul, li) ne sont pas interprétées de la même façon selon le navigateur.

Comme il y a plusieurs niveaux de listes, le positionnement de ces attributs est délicat.

Voici une proposition de feuille de style qui donne un résultat correct (testé sous IE6 et FF2).

Code css :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
ul, li {
	list-style: none outside none; 
}
#menu .level1 {	
	margin: 0 0 1px 0; 
	padding: 0 0 4px 0; 
	overflow: hidden;
	background-color: #7E7E7E; 
}
#menu .level1 .item1 {	
	margin: 0; 
	padding: 0 20px 0 5px; 
	font-family: Tahoma, Arial; 
	font-size: 11px; 
	font-weight: bold; 
	line-height: 16px; 
	height: 16px; 
	text-align: center;
	background-color: #7E7E7E; 
	color: white;
}
#menu .level1 .subitems {
	line-height: 0; 
	font-size: 0;
	overflow: hidden; 	
	padding:0 3px;	
}
#menu .level1 .subitems .level2 {	
	margin: 0; 
	padding: 0; 
	overflow: hidden;
	border-top:1px solid #000; 
	border-bottom:1px solid #cdcdcd; 
}
#menu .level1 .subitems .level2 .item2 {
	padding: 0; 
	background-color: #BFBFBF; 
	border-bottom:1px solid #777; 
	color: black;	
}
#menu .level1 .subitems .level2 .item2 span,
#menu .level1 .subitems .level2 .item2 a {
	display: block; 
	width: 135px; 
	padding: 0px 5px; 
	font-family: Tahoma, Arial; 
	text-decoration: none; 
	line-height: 12px; 
	font-size: 10px; 
	text-align: left; 
	color: black;
	background-color:#BFBFBF;	
}
#menu .level1 .subitems .level2 .item2 a:hover {
	background-color: #DADADA; 
	padding-left: 10px; 
	width:130px;
}
 
/* ---- Ajustement spécifiques IE7 ------------------------------------------------- */
*+html #menu .level1 {
	padding: 0 0 4px 0; 
	min-height: 18px;
} 
*+html #menu .level1 .subitems {
	margin-bottom: 0; 
	font-size: 0.01em;
}
*+html #menu .level1.empty {
	min-height: 16px;
}

En espérant que ça te convienne.

A+

**devyan** · 07/11/2008, 16h15

Merci, je regarderais ça ce soir à tête reposée...

Yan.

P.S. : as-tu modifier beaucoup de choses ? Les modifications que tu as apportées ne sautent pas aux yeux.
Les font-size:0 line-height:0 sur les UL sont indispensables lors de l'"animation" du menu (affichage/masquage du level2)

**c_s_s** · 07/11/2008, 16h21

Autant pour moi, je n'avais pas vu l'utilité des font-size:0 et line-height:0.

Sinon j'ai modifié quelques marges (margin, padding) et bordures. J'ai également enlevé quelque alignements qui ne semblaient pas utiles (mais peut-être qu'ils le sont sur une version plus complète).

Enfin l'essentiel des corrections concernent les marges et bordures.

**devyan** · 07/11/2008, 22h56

Je vais regarder ...

Dans l'ensemble, les marges et bordures servent à priori pour obtenir le rendu en pièce jointe dans mon premier message

mais ce sont elles qui posent problème alors je vais revoir ma copie

A+

**devyan** · 17/12/2008, 23h09

Salut,

Après quelques semaines d'abandon (afin d'y revenir avec un œil neuf avec l'espoir que quelqu'un ait une idée pour résoudre mon problème

) voilà que je me penche à nouveau sur ce problème avec IE6...

Sans les bordures de "décoration" sur #menu .level1 .subitems le problème n'apparaît pas mais elle font à part entière partie de mon "design" (pour limiter le nombre d'images utilisées)

Il y a quelques jours une réponse de Bisûnûrs à ce message proposait comme solution de fixer "width:100%" pour régler un problème de dimensionnement vertical

... Après 2-3 tests, le problème pouvait aussi bien être résolu en fixant "height:100%" (ce qui semble beaucoup plus logique

mais qui a comme effet, précisé par Bisûnûrs d'ailleurs, de "forcer" haslayout pour IE6 ce qui corrige le problème)

Là je me suis dit que mon problème pouvait provenir du même genre de cause et ai donc repris mon menu déroulant pour quelques tests...

Finalement j'ai réussi à obtenir un menu déroulant vertical comme je le désirai et qui fonctionne aussi avec IE6 (en plus de FF2 et 3, IE7, Opera9, SAFARI windows)

Je viens donc partager la solution avec vous...

Il faut donc ajouter "height:100%" à la déclaration CSS #menu .level1 .subitems .level2 de mon message initial.

Et oui uniquement ça !!!

Menu vertical - rendu instable avec IE6

CSS

Vue hybride

Discussions similaires

Partager

Partager