[CSS] Problème de compatibilité IE...

Version imprimable

Bonjour,

Pour faire simple, voici le code de mon css :

Code:

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
body{
	background:url(fond.jpg);
	text:#3366FF;
	font-family:Comic Sans MS, Arial, Verdana, Times New Roman, Courrier;
}
#fondenTete{
	position:absolute;
	top:5px;
	left:115px;
	width:750px;
	height:65px;
	background-color:black;
}
#enTete{
	position:absolute;
	top:10px;
	left:120px;
	width:750px;
	height:65px;
	background-color:darkgrey;
}
#superMenu{
	border:0px
	margin:0px;
	padding:0px;
	position:absolute;
	top:80px;
	left:120px;
	z-index:3;
}
#fondcontenu{
	position:absolute;
	top:110px;
	left:115px;
	width:750px;
	height:400px;
	background-color:black;
	z-index:1;
}
#contenu{
	position:absolute;
	top:115px;
	left:120px;
	width:750px;
	height:400px;
	background-color:darkgrey;
	z-index:2;
}
div#menu *{
	cursor:crosshair;
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:center; 
}
 
div#menu dl {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	float:left; 
	width:150px;
}
div#menu dl dt a,
div#menu dd ul li a {
	padding:0px;
	height:20px;
	color:gold;
	font-size:14px; 
	text-decoration:none; 
	display:block; 
}
div#menu dt a { 
	font-weight:bold;
}
div#menu dl a:hover { 
	color:gold; 
}
div#menu dl dt a { 
	background-color:dimgrey; 
}
div#menu dl dt a:hover { 
	background-color:dimgrey; 
}
div#menu dl dd { 
	display:none; 
}
div#menu dl dd ul li { 
	background-color:dimgrey; 
	border-left: 1px solid black;
	border-right: 1px solid black;
}
div#menu dl dd ul li a {
	background-color:dimgrey; 
	height:20px;
	font-size:12px; 
}
div#menu dl dd ul li a:hover { 
	background-color:grey; 
	color:black;
}

Sous Firefox, je n'ai aucun problème d'affichage pour mon menu déroulant et le z-index fonctionne très bien mais dès que je suis sous IE, les z-index ne fonctionnent plus et le menu "se déroule bien" mais dès que je commence à descendre le menu avec la souris, celui-ci se referme avant que j'ai eu le temps de cliquer sur le lien qu'il contenait (alors qu'avec Firefox, tout va bien...)

Bref après deux soirs d'essais infructueux je m'en remet à votre expérience :wink:

Merci d'avance.

Alex

Code:

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
<div id="fondenTete"></div>
<div id="enTete"></div>
<div id="superMenu">
<div id="menu">
  <dl onmouseover="showhide('dd','menu1')" onmouseout="showhide('dd','')">
    <dt><a>Présentation</a></dt>
    <dd id="menu1">
      <ul>
        <li><a href="#">Ma page perso</a></li>
        <li><a href="#">Mon CV</a></li>
      </ul>
    </dd>
  </dl>
  <dl onmouseover="showhide('dd','menu2')" onmouseout="showhide('dd','')">
    <dt><a>Jeux-vidéo</a></dt>
    <dd id="menu2">
      <ul>
        <li><a href="#">Mes créations</a></li>
        <li><a href="#">Mes projets</a></li>
      </ul>
    </dd>
  </dl>
  <dl onmouseover="showhide('dd','menu3')" onmouseout="showhide('dd','')">
    <dt><a>Informatique</a></dt>
    <dd id="menu3">
      <ul>
        <li><a href="#">Fiches de programmation</a></li>
        <li><a href="#">Trucs et astuces</a></li>
      </ul>
    </dd>
  </dl>
  <dl onmouseover="showhide('dd','menu4')" onmouseout="showhide('dd','')">
    <dt><a>Liens</a></dt>
    <dd id="menu4">
      <ul>
        <li><a href="#">Programmation</a></li>
        <li><a href="#">Divers</a></li>
      </ul>
    </dd>
  </dl>
  <dl onmouseover="showhide('dd','menu5')" onmouseout="showhide('dd','')">
    <dt><a>Contact</a></dt>
    <dd id="menu5">
      <ul>
        <li><a href="#">Mon E-mail</a></li>
      </ul>
    </dd>
  </dl>
</div>
</div>
<div id="fondcontenu"></div>
<div id="contenu"></div>
</body>

Le code entre mes balises <body> et </body>.

Code:

1
2
3
4
5
6
7
8
9
function showhide(tag, id) {
	var tabTmp = new Array();
	tabTmp = document.getElementsByTagName(tag);
	for (i=0; i<tabTmp.length; i++) {
		tabTmp[i].style.display = 'none';
	}
	if (id != '')
		document.getElementById(id).style.display = 'block';
}

Et la fonction javascript qui permet de gérer tout ça .

16/12/2005, 10h08
alex6891

Personne n'a déjà rencontré un tel problème ?
18/12/2005, 23h43
kemenaran

En fait je crois qu'il est difficile de faire comprendre à IE (ou même à d'autres navigateurs) que quand tu survoles un sous-item du menu tu es en fait toujours sur le menu : ton event "onmouseout" est peut-être activé par IE lorque tu commences à survoler les sous-menus, alors qu'il ne devrait pas - tu peux peut-être vérifier avec un "alert()".

Si tu n'arrives pas à déboguer ça, il y a un workaround, pas très élégant mais qui marche bien : pour chaque item du menu, tu mets uniquement un mouseover, en gardant la même fonction qu'actuellement (on montre le menu pasé en argument et on masque tous les autres). Ensuite, pour chaque élément entourant le menu (genre ton header, ton contenu, etc), tu mets un "onmouseover="showhide('dd','')". Avec cette méthode, un menu déroulé est caché :
- Soit quand tu survoles un autre menu
- Soit quand tu survoles un élément de ta page autre que le menu (header, content ou autre)

... Accessoirement, il y aurait encore une autre solution, mais plus complexe : tu rajoutes un event "onmouseover" sur tes sous-menus, qui "verrouille" le menu ; en gros "si on demande à fermer le menu, on vérifie d'abord qu'il n'y a pas une variable indiquant qu'on est en ce moment en train de survoler le sous-menu". Mais ça t'obliges a faire une fonction et des checks en rab...