11548 sujets

JavaScript, DOM et API Web HTML5

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

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
<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
#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)
<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
<!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)
[url supprimée...] sans DOCTYPE
[url supprimée...] avec DOCTYPE

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

J'ai essayé, tour à tour, les 7 DOCTYPE suivants:

<!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)

Merci d'avance pour votre aide...[/i][/i]
Modifié par GiB (30 Jan 2008 - 10:41)
Bonjour,
En l'absence de doctype, les navigateurs récents basculent
dans un mode de compatibilité descendante qu'on appelle mode quirks.
Ce mode est plus permissif vis à vis de certaine propriété CSS,
de la syntaxe HTML et il me semble aussi vis à vis de la syntaxe javascript.
D'autre part il acceptera les implémentations propriétaires et non standard.

Ton problème touche au javascript, je deplace donc ce sujet dans
le salon adéquat.
Modifié par Hermann (05 Apr 2007 - 20:34)
Merci pour cette réponse rapide!

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

[url supprimée...]

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

En réalité, je ne suis pas sûr qu'il s'agisse d'un problème de JS. Je tendrais à songer à un problème de CSS, non?

Encore merci...
Modifié par GiB (30 Jan 2008 - 10:42)
C'est réglé, grâce à une super modératrice (Candygirl, sur un autre forum) qui savait qu'il fallait "simplement" ajouter une couleur de fond au premier <ul>.

#menu ul {
  background-color:#fff;
}


Incroyable mais vrai.

C'était donc bien un problème CSS, à redéplacer dans le bon forum pour aider les autres! ;o)
Modérateur
Salut,

C'est inaccessible. Smiley cligne

pas de navigation clavier, pas de menu sous IE si JS désactivé (le menu devrait être positionné en relatif et être ouvert lorsque c'est le cas), les items du menu sont toujours inaccessibles sous IE... Pourquoi quand je clique sur menu 2, ça se ferme ? (sous-entendu, à quoi sert ce lien mis à part pour l'ouverture du menu ? -> il devrait être ajouté via JS et ne rien transmettre au clic si ça ne sert qu'à l'ouverture)
Merci koala64 mais ce menu est une maquette, rien d'autre.

C'est un menu-prototype pour un site-prototype. Pas d'accessibilité chrechée, juste de la fonctionalité en environnement contrôlé (JS pas un problème).

Encore merci et bonne soirée!
Modérateur
heu... oui mais ça ne marche pas quand même sous IE. Le sous-menu s'ouvre mais est inaccessible à la souris... m'enfin, si c'est ce dont tu as besoin pour ton prototype, ok... Smiley sweatdrop
Non, c'est juste que je n'avais pas publié les modifs...

[url supprimée...]
Modifié par GiB (30 Jan 2008 - 10:41)
J'ai trouvé sur le site w3c, plusieurs DOCTYPE, dont celui-ci qui m'a permis de résoudre le problème d'un menu en liste UL/LI. (ce qui ressemble au tiens)
Peut-être que cela pourrait t'aider.(même si le post est vieux)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
(sorry, voulais pas faire un up, problème résolu, de fait...)
Modifié par GiB (30 Jan 2008 - 10:43)
Sujet clos
Aller à