Discussion :

[JeBaY]

Bonjour a tous,

Celà fait maintenant une grosse semaine que je suis à la recherche du menu de mes rêves. Je pensais l'avoir trouvé tout à l'heure, tout allait bien jusqu'à ce que IE fasse des siennes : le menu passe sous le slideshow prévu sur le design final, voyez plutot :

http://s212093730.onlinehome.fr/infopsg2/

Sous Firefox, Chrome, etc ... tout va bien. C'est sous IE que tout déconne.

Je pense donc que le probleme vient de la position absolute, mes différentes recherches sur le net m'ot en tout cas menées a ca.

Le problème c'est que je suis vraiment novice en la matière et je ne sais pas bien comment résoudre le probleme.


Comment faire fonctionner cette position absolute chez IE ?


J'ai deux portions de code a vous montrer, celles correspondant au menu :

La CSS, d'abord :

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
 
 
 
 
#outside{
	border:0px solid #b9121b;
	background:#071d3a url(images/navbar.gif);
	}
#navigation-1 {
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:30px;
	border-top:0px solid #FFFFFF;
	border-bottom:0px solid #FFFFFF;
	font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:148px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#071d3a url(images/navbar.gif);
	color:#ffffff;
	width:148px;
	height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#071d3a url(images/navbar.gif);
	color:#ffffff;
	width:146px;
	height:13px;
	border-left:0px solid #ffffff;
	border-right:0px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#ffffff;
	width:146px;
	position:absolute;
	top:21px;
	left:-1px;
	border:0px solid #071d3a url(images/navbar.gif);
	border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
	display:block;
}
#navigation-1 li ul.navigation-2 li {
	width:146px;
	clear:left;
	width:146px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
	clear:left;
	background:#071d3a url(images/navbar.gif);
	padding:4px 0;
	width:146px;
	border:none;
	border-bottom:0px solid #ffffff;
	position:relative;
	z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
	clear:left;
	background:#071d3a url(images/navbar.gif);;
	padding:4px 0;
	width:146px;
	border:none;
	border-bottom:0px solid #ffffff;
	position:absolute;
	z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:0px solid #b9121b;
	border-left:1px solid #b9121b;
	background:#ffffff;
	z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
	display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
	background:#b9121b;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
	background:#ec454e;
}
#navigation-1 li ul.navigation-2 li a span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#071d3a;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#ffffff;
}

Le menu :

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
<ul id="nav">						
<div id="outside">
<ul id="navigation-1">
   <li><a href="#" title="sample" target="_self" >sample</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >sample</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >sample</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >sample</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
         <li><a href="#" title="sample" target="_self" >sample</a></li>
      </ul>
   </li>
</ul>

Voilà, je vous remercie par avance de votre aide en esperant qu'il est possible de résoudre ce probleme.

JB

[razorlok]

As-tu essayé de mettre un hack IE avec un z-index:500; ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#navigation-1 {
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:30px;
	border-top:0px solid #FFFFFF;
	border-bottom:0px solid #FFFFFF;
	font:normal 8pt verdana, arial, helvetica;
       /z-index:500;
}

Si ton menu passe sous un élément, cela doit venir de là.

[Macmillenium]

Bonjour,

Ce n'est pas un problème de z-index mais de pseudo classe :hover qui ne fonctionne que sur les balises a sous IE6.

[Macmillenium]

As-tu essayé de mettre un hack IE avec un z-index:500; ?

Pas de hack, il existe des commentaires conditionnelles.

[razorlok]

Ah le débat sur les hacks...
En tout cas le mieux c'est de créer un commentaire conditionnel certes, mais pour afficher un message du genre : "Si le menu ne marche pas, passez sous un navigateur digne de ce nom"