Masquage menu sous IE6 et IE7

**aragorn23** · 29/12/2007, 17h23

J'essaie de masquer mes menus déroulants lorsque la souris ne passe plus dessus.

Cela fonctionne correctement sous Firefox, par-contre sous IE6 ou 7 je n'arrive pas à accéder à toutes les options du menu.

Mon programme principal :

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
 
<?php
 
require('TestMenu_5.html');
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link href="CSS/Menu_2.css" rel="stylesheet" type="text/css" />
 
<title>Test affiche menu</title>
 
</head>
 
 
 
<body>
 
<div id = "contenu">
 
  <form name="form1" method="post" action="">
 
    CECI EST UN TEST 
 
  </form>
 
</div>
 
</body>
 
</html>

Mon 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
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
 
script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none'; } 
	}
if (d) {d.style.display='block';}
}
</script>
 
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="Deconnexion.php">Déconnexion</a></dt>
	</dl>
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Données Personnelles.</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> 
		<!--	<dd id="smenu1"> -->
				<ul>
					<li><a href="DonneesPersonnellesFormulaireModification.php">Fiche personnelle : Modification</a></li>
					<li><a href="AffichageDonneesPersonnelles.php">Fiche personnelle : Visualisation</a></li>
					<li><a href="PoidsListe.php">Suivi du poids.</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');" >Footings</dt>
			  <dd id="smenu2" onmouseover="javascript:montre('smenu2');"  onmouseout="javascript:montre('');">  
		  <!-- <dd id="smenu2"> -->
				<ul>
					<li><a href="ParcoursListe.php">Parcours.</a></li>
					<li><a href="FootingsListe.php">Footings.</a></li>
					<li><a href="FractionneListe.php">Fractionnés.</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Statistiques</dt>
			 <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<!-- <dd id="smenu3">  -->
				<ul>
					<li><a href="StatistiquesAnnuelles.php">Km  parcourus par ann&eacute;e.</a></li>
					<li><a href="StatsParcours.php">Parcours</a></li>
					<li><a href="StatistiquesSemaines.php">Km parcourus par semaine.</a></li>
					<li><a href="StatistiquesComparatifSemaines.php">Statistiques comparatives par semaines.</a></li>
				<li><a href="StatistiquesPoids.php">Statistiques poids.</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Utilitaires</dt>
			 <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre(' ');"> 
		<!-- 	 <dd id="smenu4"> -->
			 	<ul>
					<li><a href="Abecedaire.php">Abécédaire.</a></li>
					<li><a href="Moyenne.php">Calcul de moyenne.</a></li>
					<li><a href="TableauTempsVitesses.php">Tableau des vitesses.</a></li>
					<li><a href="TableauFCM.php">Tableau des fréquences cardiaques</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">?</dt>
			 <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"> 
		<!-- 	<dd id="smenu5"> -->
				<ul>
					<li><a href="AideLigne/GestionFootings.htm">Aide.</a></li>
				<li><a href="APropos.php">A propos.</a></li>
					<li><a href="EnvoiMailWebmaster.php">Contact.</a></li>
				</ul>
			</dd>
	</dl>
</div>

Ma 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
 
body {
margin: 0;
padding: 0;
background: #FEEEBC;
font: 12px verdana, sans-serif;
}
#menu {
width:100%;
top:0px;
z-index: 2;
float:left;
position:absolute;
font: 11px verdana, sans-serif;
}
#menu dl {
float: left;
width: 14em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #3B4E77;
color: #fff;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
color: #fff;
background: #3B4E77;
}
#menu li {
text-align: center;
background: #3B4E77;
margin: 10px;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { 
background: #F2462E;
border-right: 1px solid #fff;
}
div#contenu {
	width:1200px;
	height:600px;
	top:70px;
	left:10px;
	float:left; 
	z-index: 1;
	position:absolute;
	}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

**gui8676** · 29/12/2007, 17h33

J'ai eu le meme probleme que toi si j'ai bien compris. Quand un sous menu s'affiche et que tu veux aller dessus il disparait.
J'utilise le meme script que toi
Si c'est ca le probleme vient que le css est interprété differement entre FF et IE. Essai de mettre des marges plus grandes entre ton menu et le body de ta page, car ce qui ce passe sous IE, c'est que le menu et le body son extremement sérré et tu passe tres rapidement sur le body avec ta souris donc le menu disparait.

J'espere que ca pourra t'aider

**aragorn23** · 29/12/2007, 19h33

J'ai oublié de préciser dans mon problème que si je n'utilise pas la fonction javascript onmouseout mon menu se déroule correctement sous IE et j'arrive à accéder à toutes les options.

Peux-tu m'indiquer précisement ce que tu entends par séparer le body du menu ?
Cela donne quoi au niveau du code ?

Merci d'avance

**gui8676** · 29/12/2007, 21h06

Ne tiens pas compte de ce que j'ai dis précédement, le probleme ne provient pas d'un probleme dans le css.

Je vais regarder plus precisemment ton code, je te tien au courant.

Pour que je puisse essayer dis moi dans quel fichier sont tes bouts de code?

**aragorn23** · 29/12/2007, 21h17

Tous mes codes sont présents dans les trois fichiers :

- Lancement général.
- Affichage du menu avec le java script
- La feuille de style.

Merci d'avance.