Probleme de superposition de menu

**mcgiant** · 12/06/2009, 14h10

Bonjour,

J'ai un soucis avec un menu déroulant CSS.
Mes entetes de menu sont des images. Les menus déroulants s'affichent, mais le haut est caché par la deuxième image (deuxieme menu), et ce, sous IE, alors que sous Firefox, comme de par hasard, tout s'affiche correctement.

Voici le 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
	<link rel="stylesheet" type="text/css" href="dropdown.css" title="default" media="screen" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="dropdown_ie.css" title="default" media="screen" />
<![endif]-->
</head>
 
<body>
<div class="menu">
 
<ul>
<li><a class="hide" href="../menu/index.html"><img src="http://mcgiant.free.fr/image.jpg" /></a>
 
<!--[if lte IE 6]>
<a href="../menu/index.html"><img  src="http://mcgiant.free.fr/image.jpg" />
<table ><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
 
	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
 
    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK 
    <table><tr><td>
    <![endif]-->
 
		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
 
	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
 
	</li>
 
	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li><li><a class="hide" href="index.html"><img src="http://mcgiant.free.fr/image.jpg" ></a>
 
<!--[if lte IE 6]>
<a href="index.html"><img vspace=0 src="http://mcgiant.free.fr/image.jpg" >
<table><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li>
 
<li><a class="hide" href="../layouts/index.html"><img src="http://mcgiant.free.fr/image.jpg" ></a>
 
<!--[if lte IE 6]>
<a href="../layouts/index.html"><img src="http://mcgiant.free.fr/image.jpg" >
<table><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li>
 
<li><a class="hide" href="../boxes/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
 
<!--[if lte IE 6]>
<a href="../boxes/index.html"><img src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li>
 
<li><a class="hide" href="../mozilla/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
 
<!--[if lte IE 6]>
<a href="../mozilla/index.html"><img src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li>
 
<li><a class="hide" href="../ie/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
 
<!--[if lte IE 6]>
<a href="../ie/index.html"><img src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
	<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li>
 
<li><a class="hide" href="../opacity/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
 
<!--[if lte IE 6]>
<a href="../opacity/index.html"><img border=0  src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
 
	<ul>
	<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
	<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
	<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>
 
    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
    <table><tr><td>
    <![endif]-->
 
		<ul class="left">
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
 
	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
 
	</li>
	</ul>
 
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
 
</li>
</ul>
 
</div>
 
</body>
</html>

Le css spécifique IE :

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
 
img { border:0;}
.menu {width:570px; height:100px; position:relative; font-size:11px; }
.menu ul li a.hide, .menu ul li a:visited.hide {display:none; }
.menu ul li a:hover ul li a.hide {display:none; }
.menu ul li a:hover {color:#fff; background-color:transparent; }
.menu ul li a:hover ul {display:block; position:absolute; top:51px; width:105px;left:5px;  }
.menu ul li a:hover ul li a.sub {color:#fff;background:#787878 url("") right center no-repeat;}
.menu ul li a:hover ul li a.sub:hover {color:#fff;background:#A1A1A1 url("") right center no-repeat;}
 
.menu ul li a:hover ul li a {display:block; background:#787878;z-index:inherit; color:#ffffff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#A1A1A1; color:#ffffff; }
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000; }
.menu ul li a:hover ul li a:hover ul.left {left:-105px; }

Le css pour les autres navigateurs

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
 
img {border:0;}
.menu {width:590px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; line-height:20px; font-family:Verdana,Arial,Helvetica,Tahoma,sans-serif; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none; border-top:1px solid #FFF; border-right:1px solid #999; border-left:1px solid #FFF; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li ul li a {width:100px;border-bottom:1px solid #999;padding-left:5px}
 
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff;background:#787878; }
.menu ul li:hover ul {display:block;background:#787878;top:51px; position:absolute; border-bottom:1px solid #999; left:5px; width:105px;z-index:1}
.menu ul li:hover ul li a.hide {background:#787878 url("") right center no-repeat; border-bottom:1px solid #999;color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#A1A1A1 url("") right center no-repeat;border-bottom:1px solid #999;color:#fff;}
.menu ul li:hover ul li ul {display: none;background:#787878;}
.menu ul li:hover ul li a {display:block; background:#787878; color:#fff;}
.menu ul li:hover ul li a:hover {background:#A1A1A1; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block;background:#787878;position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;background:#787878;}

Merci pour vos retours,

**grafik.muzik** · 15/06/2009, 00h04

As-tu essayé de modifier les z-index dans la feuille de style pour IE?

Ma réponse n'est pas très précise mais c'est le mieux que je puisse faire

**mcgiant** · 16/06/2009, 16h53

Bonjour grafik.muzik,

Merci pour ton retour,

Bah ouais, j'ai essayé les z-index, mais IE ne veut rien savoir...

Je pense que c'est effectivement à ce niveau la qu'il y a un soucis, mais je suis pas super chaud en CSS, donc...

**voleurdecarottes** · 17/06/2009, 10h49

Pfiou, quel bazar dans le code! Mettre autant de "if lte IE 6", ce n'est pas lisible et en plus ça double les CSS. Perso, dans mes sites j'essaye toujours d'avoir un seul CSS, avec à la rigueur quelques exceptions pour IE6 (en mettant un _ devant les propriétés IE6), après c'est beaucoup plus facile pour les corrections.

Trucs très bêtes à tester avant d'aller plus loin:
- Vide ton cache très régulièrement!
- Es-tu certain que tu modifies le bon CSS? Essaye avec autre chose de plus flagrant au début pour voir.

Probleme de superposition de menu

CSS

Vue hybride

Discussions similaires

Partager

Partager