je cherche à faire un menu fonctionnel pour tous les navigateurs (merci à alsacreations pour la structure du menu
Lorque que je charge la page, le script s'exécute, et rien ne se passe. Si je redimenssionne la fenêtre (double-clic sur la barre du haut par exemple) alors l'affichage correspond à celui attendu.
Opera (8) ne connait pas se problème, Internet Explorer (6) non plus, et vu que le code javascript est très simple, je crois que c'est un bug. Votre avis est demandé
Edit : j'ai trouvé un bug qui semble similaire.
Voici le code source utilisé, visible (temporairement) en ligne
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BUG</title>
<script type="text/javascript">
<!--
window.onload = makeCleanMenu;
function makeCleanMenu()
{
/* positionnement absolu de "#menu ul"
* C'est là que ça ne marche pas pour Firefox */
subMenusUList = document.getElementById("menu").getElementsByTagName("ul");
for(i=0;i<subMenusUList.length;i++) {
subMenusUList[i].style.position="absolute";
}//*/
}
//-->
</script>
<style type="text/css">
<!--
body {
margin:0;padding:0;
}
#menu dl {
float:left;
}
#menu ul {
/* Si j'utilise ce propriété ici ça marche mais pas en javascript.
position:absolute;/**/
}
-->
</style>
</head>
<body>
<p>Pour tester le bug sous Firefox, redimensionner la fenêtre </p>
<div id="menu">
<dl>
<dt><a href="javascript:void(0)">Titre 1</a></dt>
<dd>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0)">Titre 2</a></dt>
<dd>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0)">Title 3</a></dt>
<dd>
<ul>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BUG</title>
<script type="text/javascript">
<!--
window.onload = makeCleanMenu;
function makeCleanMenu()
{
/* positionnement absolu de "#menu ul"
* C'est là que ça ne marche pas pour Firefox */
subMenusUList = document.getElementById("menu").getElementsByTagName("ul");
for(i=0;i<subMenusUList.length;i++) {
subMenusUList[i].style.position="absolute";
}//*/
}
//-->
</script>
<style type="text/css">
<!--
body {
margin:0;padding:0;
}
#menu dl {
float:left;
}
#menu ul {
/* Si j'utilise ce propriété ici ça marche mais pas en javascript.
position:absolute;/**/
}
-->
</style>
</head>
<body>
<p>Pour tester le bug sous Firefox, redimensionner la fenêtre </p>
<div id="menu">
<dl>
<dt><a href="javascript:void(0)">Titre 1</a></dt>
<dd>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0)">Titre 2</a></dt>
<dd>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0)">Title 3</a></dt>
<dd>
<ul>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>