Problème compatibilitée Internet Explorer

**eclectique_95470** · 27/06/2012, 11h42

Bonjour, J'ai fais le menu Suivant en CSS/JQuery/HTML.

Le menu marche tres bien, sauf sous internet explorer.

Le code de l'index :

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
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
>html>
<head>	
	<title>Le super mega menu de Kevin qui déchire tout
	</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="./menu.js">
</script>
</head>
<body>		
onClick="location.href='/dentiste/dental-promo/'"
<div id="site">
 
	<!-- HAUT -->
	<div id="haut">
		<!-- NAVIGATION -->
		<div id="navigation">
			<!-- Menus -->
			<div id="navigation-menu">	
				<div class="navigation-menu-elem" id="seformer"><a class="oneLined">Se Former</a>
				<!--Sous menu Se former-->
					<div class="fond-sous-menu">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Formation continue</a>
						</div>
					</div>	
					<div class="fond-sous-menu" style="margin-top:0px;">
						<div class="sous-menu" >
						<a class="twoLinedss" href="#">Cours, Congrès, Conférences</a>
						</div>
					</div>	
					<div class="fond-sous-menu" style="margin-top:0px;border-style:none solid solid solid;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Vidéos à la demande</a>
						</div>
					</div>	
				<!--Fin sous menu se former-->
				</div>
				<div class="navigation-menu-elem" id="dentaltv"><a class="oneLined">Dental TV</a>
				<!--Sous menu DentalTV-->
					<div class="fond-sous-menu">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Nos Reportages</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;border-style:none solid solid solid;">
						<div class="sous-menu">
							<a class="oneLinedss" href="#">Les Actualités</a>
						</div>
					</div>
				<!--Fin Sous menu DentlTV-->
				</div>
				<div class="navigation-menu-elem" id="infoproduit"><a class="oneLined">Dental Guide</a>
				<!--Sous menu Info Produits-->
					<div class="fond-sous-menu">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Fiches Produits</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Vidéos</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;border-style:none solid solid solid;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Communiqués de presse</a>
						</div>
					</div>
				<!--Fin Sous menu Info Produits-->
				</div>
				<div class="navigation-menu-elem" id="boutique"><a class="oneLined">La Boutique</a>
				<!--Sous menu La Boutique-->
					<div class="fond-sous-menu">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Ventes Promo</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Matériel d'occasion</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;border-style:none solid solid solid;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Ventes Flash</a>
						</div>
					</div>
				<!--Fin sous menu Boutique-->
				</div>
				<div class="navigation-menu-elem" id="communaute"><a class="oneLined">La Communauté</a>
				<!--Sous menu communauté-->
					<div class="fond-sous-menu">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Postez vos photos/vidéos</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Le forum</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;">
						<div class="sous-menu">
						<a class="twoLinedss" href="#">Créez le site de votre<br/>cabinet</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px; border-style:none solid solid solid;">
						<div class="sous-menu">
						<a class="twoLinedss" href="#">Référencez le site de<br/>votre cabinet</a>
						</div>
					</div>
				<!--Fin Sous menu communauté-->
				</div>
				<div class="navigation-menu-elem" id="petiteannonce"><a class="onelined">Les Petites Annonces</a>
				<!--Sous menu petites annonces-->
					<div class="fond-sous-menu">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Déposez votre annonce</a>
						</div>
					</div>
					<div class="fond-sous-menu" style="margin-top:0px;border-style:none solid solid solid;">
						<div class="sous-menu">
						<a class="oneLinedss" href="#">Consultez les annonces</a>
						</div>
					</div>
				<!--Fin sous menu petites annonces-->
				</div>
			</div>
		</div>
				</div>
		<div class="clear"></div>
	</div>
</body>
</html>

La feuille de style

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
#site {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}
 
#haut {
	background: url(./Images/Navigation_fond.png) no-repeat;
}
 
.clear {
	clear: both;
}
 
/* Navigation */
#navigation {
	margin-bottom: 5px;
	width: 1000px;
	height: 50px;
	background: url(./Images/Navigation_barre_fond.gif) no-repeat;
	position: relative;
	z-index: 2;
}
 
 
/* Navigation menu */
#navigation-menu {
	float: left;
	width: 988px;
	margin: 0px; 
	padding-left: 12px;
	height: 51px;
	background: url(./Images/Navigation.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
}
.navigation-menu-elem {
	height: 43px;
	text-align: center;
	padding: 0px 12px 0px 12px;
	margin-top: 5px;
	float: left;
	background: none;
	cursor: pointer;
	-moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	text-decoration:none;
}
 
.fond-sous-menu{
	display:none;
	margin-top: 20px;
	padding-left:10px;
	background-image: url(./Images/deroul.png);
	height: 55px;
	width:70px;
}
 
.sous-menu{
	height: 45px;
	width:60px;
	text-align: center;
	margin-top: 5px;
	float: left;
	background: none;
	cursor: pointer;
	color:white;
	-moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
 
 
.sous-menu:hover {
	background-color: white;
	color: black;
}
.sous-menu a{
	color: white;
	text-decoration: none;
}
.sous-menu:hover a{
	color: black;
	text-decoration: none;
}
 
div.navigation-menu-elem a{
	color: white;
	text-decoration: none;
	color:inherit;
}
div.navigation-menu-elem:hover a{
	color: black;
	text-decoration: none;
	color:inherit;
}
.oneLined{
	position:relative;
  top:8px;
}
 
div.navigation-menu-elem:hover{
	background-color: white;
	color: black;
}

Le JQuery

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
	$(function(){
 
	$(".navigation-menu-elem").mouseenter(function(){
															$(this).children(".fond-sous-menu").stop(true,true).slideDown(500)
															})
								  .mouseleave(function(){
															$(this).children(".fond-sous-menu").stop(true,true).slideUp(500)
															})
 
 
	})

Si vous voulez que je vous envoies le code complet en archive avec les images, n'hesitez pas a demander.
Merci d'avance pour votre aide.

**mcoutant** · 27/06/2012, 11h53

Salut eclectique_95470,

Aucun soucis chez moi ton code s'éxecute de la même façon sur ff que sur ie.
Peut être devrais tu envoyer directement une archive avec ton dossier (car je n'ai pas les images etc ..)