[DOCTYPE / IE / CSS] Menu déroulant / problème avec IE

**gb-ch** · 05/04/2007, 18h57

Bonjour,

J'ai un problème avec un menu horizontal déroulant...

Avec Firefox, ça fonctionne parfaitement, avec IE le sous-menu s'affiche mais disparaît lorsque l'on essaye d'y accéder (lorsqu'on descend le curseur de la souris), comme si on perdait l'état de "mouse over".

l'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
<ul id="menu">
	<li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a>
		<ul>
			<li><a href="">Sous-Menu 1</a></li>
			<li><a href="">Sous-Menu 2</a></li>
			<li><a href="">Sous-Menu 3</a></li>
			<li><a href="">Sous-Menu 4</a></li>
		</ul>
	</li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li>
	<li><a href="">Menu 5</a></li>
	<li><a href="">Menu 6</a></li>
</ul>

Le CSS

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
#menu {
	position: absolute;
	left: 62px;
	top: 141px;
	border: 0;
}
#menu, #menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#menu a {
	display: block;
	text-decoration: none;
	color: #334;
	padding: 0;
	border-bottom: 2px solid #fff;
	padding-bottom: 2px;
}
#menu li {
	float: left;
	padding: 0 44px 0 0;
}
#menu a:hover {
	padding-bottom: 2px;
	border-bottom: 2px solid #0055a0;
}
#menu li ul {
	position: absolute;
	padding-top: 13px;
	margin: 0;
	display: none;
}
#menu li ul li {
	padding: 0;
	margin: 0;
	background: #f9f9f9;
}
#menu li ul li a, #menu li ul li a:hover{
	width: 136px;
	padding: 9px 7px;
	border-bottom: 1px solid #dadada;
}
#menu li ul li a:hover {
	color: #0055a0
}
#menu li:hover ul, #menu li.sfhover ul {
	display: block; /* classe "sfhover" lors de mouseover, voirJavaSscript */
	width: 150px;
}

La Javascript (pas important pour ma question)

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
<script type="text/javascript">
	sfHover = function() {
		var sfEls = document.getElementById("menu").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
	//-->
</script>

Intéréssant, avec IE ça fonctionne parfaitement (comme avec Firefox) si j'enlève le DOCTYPE de mon fichier HTML. Sans DOCTYPE (donc avec un DOCTYPE par défaut) ça fonctionne bien comme sur Firefox.

Mon DOCTYPE actuel

Code :

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

1
2
<!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">

Pour la démo en live (à tester avec IE, pas de différence avec Firefox)
sans DOCTYPE
avec DOCTYPE

Bien sûr, j'aimerais bien que mon fichier HTML ait son DOCTYPE déclaré...

Que faire à votre avis? Changer de DOCTYPE? Lequel mettre?

Sinon, que changer dan sle CSS?

Merci...

**gb-ch** · 05/04/2007, 19h49

Je peux déjà spécifier que j'ai finalement essayé, tour à tour, les 7 DOCTYPE suivants

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Et ça ne change rien... C'est seulement SANS (!) DOCTYPE que IE réagit comme il se doit (comme Firefox).

La solution est donc probablement celle de garder le DOCTYPE original mais de faire quelques retouches au CSS. Qui s'y lance? ;o)

**Dan_A** · 05/04/2007, 20h23

Un doctype n'a de sens qu'avec de l'HTML valide.
Ce n'est pas du tout le cas des 2 pages.
Utiliser le mode Quirks ne permet pas de prévoir le comportement du code.
Avec un DOCTYPE complet, il faut retirer border-bottom et padding-bottom dans #menu a et #menu a:hover ainsi que padding-top dans #menu li ul .

**gb-ch** · 05/04/2007, 20h43

Merci, Dan_A, pour ta réponse rapide!

Afin d'améliorer ce test, j'ai ajouté une troisième version de mon menu, après m'être assuré que le HTML et le CSS soitent valides.

Menu avec HTML / CSS valides

Le menu continue de fonctionner bien avec Firefox, pas avec IE...

Envoyé par Dan_A

Avec un DOCTYPE complet, il faut retirer border-bottom et padding-bottom dans #menu a et #menu a:hover ainsi que padding-top dans #menu li ul .

Si je retire ces instructions, le menu n'aura plus la même tête! Le border bleu au passage de la souris est souhaité et le décalage visuel entre le premier niveau et le sous-menu est souhaité (et cela ne va pas changer) afin de l'intégrer à mon design.

Le padding-top #menu li ul est justement pour assurer l'état de "mouse over" lorsque l'on descend le curseur de la souris tout en laissant un "vide" (voulu et obligatoire) grâce au remplissage transparent entre le menu de premier niveau et le premier item (<li>)du sous-menu.

Quelles modifs pour que le menu s'affiche EXACTEMENT de cette manière mais qui fonctionne correctement avec IE, comme c'est le cas avec Firefox?

Encore merci...

**Candygirl** · 05/04/2007, 20h53

Envoyé par gb-ch

Quelles modifs pour que le menu s'affiche EXACTEMENT de cette manière mais qui fonctionne correctement avec IE, comme c'est le cas avec Firefox?

en rajoutant une couleur de fond à ton #menu ul, si c'est possible:

Code :

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

1
2
3
#menu ul {
  background-color:#fff;
}

**gb-ch** · 05/04/2007, 21h11

Wow, Candygirl! Merci bcp, c'est super!

Qui l'aurait cru? Je n'aurais vraiment jamais trouvé ça...

Entre-temps, si ça intéresse quelqu'un j'ai amélioré (je crois) mon CSS et j'obtiens donc au final le code sivant:

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
<style type="text/css">
			/* 1er niveau */
			ul#menu {
				padding: 0;
				margin: 0;
				position: absolute;
				left: 62px;
				top: 141px;
				list-style: none;
				background-color:#fff;
			}
			ul#menu li {
				float: left;
				padding: 0 44px 20px 0; /* pour marger à droit et remplir vers le bas */
			}
			ul#menu li a {
				display: block;
				padding: 0;
				margin: 0;
				text-decoration: none;
				color: #334;
				padding-bottom: 2px; /* enspace entre texte et bordure */
				border-bottom: 2px solid #fff;
			}
			ul#menu li a:hover {
				border-bottom: 2px solid #0055a0;
			}
 
			/* 2ème niveau */
			ul#menu li ul {
				padding: 0;
				margin: 0;
				list-style: none;
				position: absolute;
				padding-top: 13px;
				display: none;
			}
			ul#menu li ul li {
				padding: 0;
				margin: 0;
				background: #f9f9f9;
			}
 
			ul#menu li ul li a {
				width: 136px;
				padding: 9px 7px;
				border-bottom: 1px solid #dadada;
			}
			ul#menu li ul li a:hover {
				color: #0055a0;
				border-bottom: 1px solid #dadada;
			}
 
			/* effet lors du passage de la souris */
			ul#menu li:hover ul, #menu li.sfhover ul {
				display: block; /* classe "sfhover" al mouseover, cf JavaSscript */
				width: 150px;
			}
		</style>

[DOCTYPE / IE / CSS] Menu déroulant / problème avec IE

CSS

Vue hybride

Discussions similaires

Partager

Partager