Problème épineux de bug IE6 > Menu en cascade

Signaler
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008
-
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008
-
Bonjour à tous,

J'ai un problème épineux a vous soumettre, un bug d'affichage avec IE6.

J'explique en deux mots : un menu en cascade de deux sous menu, lors du survol d'un lien dans le premeier sous menu, un second s'ouvre.
Cela fonctionne très bien et s'affiche clairement dans IE7 et Firefox, seulement dans IE6 je me retrouve avec un espace sous le lien vers le sous-sous menu et je n'arrive vraiment pas a m'en débarasser. Je joint mon code pour ceux qui voudraient s'amuser de ce casse tête chinois :

menu.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=utf-8" />
<title>Document sans nom</title>
<!--Gestion du menu haut-->
<script type="text/javascript" src="menu.js"></script>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

[# Menu]
       
<li>[# Sous menu 4.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</li><li>[# Sous menu 4.2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
                            <!-- sous sous menu 3 -->
        

        <li>[# Sous menu 4.2.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</li><li>[# Sous menu 4.2.2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</li><li>[# Sous menu 4.2.3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</li><li>[# Sous menu 4.2.4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</li>
        

                            </li>

</html>

menu.js
function montre(id) {
 var d = document.getElementById(id);
  for (var i = 1; i<=7; i++) {
   if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
 if (d) {d.style.display='block';}
 }
 
 function show(id) {
 var d = document.getElementById(id);
  for (var i = 1; i<=7; i++) {
   if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
  }
 if (d) {d.style.display='block';}
 }

et enfin la feuille de style, menu.css
#navigationprincipale, #navigationprincipale li {
margin:0;
padding:0;
list-style:none;
}


#navigationprincipale li {float:left;}


#navigationprincipale a {display: block; cursor: pointer; font-size:11px; letter-spacing:0px; font-weight:bold; color:black; text-decoration:none;}


* html #navigationprincipale li {
 width: 1%;
 overflow: visible;
}


*:first-child+html #navigationprincipale li {
 overflow: visible;
}


div.smenu {
margin:0;
padding:0 ;
display:none;
position:absolute;
/*top:106px;*/
z-index:1000;
width:190px;
}




div.smenu ul {
margin:0 ;
padding:0;
padding-bottom:0px;
list-style:none;
border:1px solid #4998D0;
background:#fff;
width:100% !important;
display:block !important;
}


div.smenu ul li {
float:none !important;
display:block !important;
margin:0;


padding:0;
width:100% !important;
font-size:10px !important;
font-weight:normal !important;
}


div.smenu li a {
margin:0;
font-size:10px !important;
font-weight:normal !important;
display:block !important;
margin-top:0px;
padding:5px !important;
/*background:none !important;*/
color:#026094 !important;
text-decoration:none;
text-align:left !important;
}


div.smenu li a:hover {
background:#D9EAF4 !important;
color:#000 !important;
}


 


/* sous-sous menu */


div.ssmenu {
margin:-23px 0 0 0;
padding:0 ;
display:none;
position:absolute;
left:191px;
/*top:4px;*/
z-index:1000;
width:190px;
}


div.ssmenu ul {
margin:0 ;
padding:0;
list-style:none;
border:1px solid #4998D0;
background:#fff;
}

Désolé pour la longueur du post, j'ajouterais que ce menu est aisément modifiable pour vos créations ;o)

8 réponses

Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Bonjour,
voici pour la page :
<!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 rel="stylesheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
<title>Document sans titre</title>
</head>







[# Menu]






<li>[# Sous menu 4.1 ]</li>
<li>[# Sous menu 4.2 ]</li>



<!-- sous sous menu 3 -->



<li>[# Sous menu 4.2.1 ]</li>
<li>[# Sous menu 4.2.2 ]</li>
<li>[# Sous menu 4.2.3 ]</li>
<li>[# Sous menu 4.2.4 ]</li>





</html>

Et pour le css !


/* CSS Document */
#navigationprincipale, #navigationprincipale li {
margin:0;
padding:0;
list-style:none;
}

#navigationprincipale li {float:left;}

#navigationprincipale a {display: block; cursor: pointer; font-size:11px; letter-spacing:0px; font-weight:bold; color:black; text-decoration:none;}

* html #navigationprincipale li {
width: 1%;
overflow: visible;
}

*:first-child+html #navigationprincipale li {
overflow: visible;
}

div.smenu {
margin:0;
padding:0 ;
display:none;
position:absolute;
/*top:106px;*/
z-index:1000;
width:190px;
}


div.smenu ul {
margin:0 ;
padding:0;
padding-bottom:0px;
list-style:none;
border:1px solid #4998D0;
background:#fff;
width:100% ;
display:block ;
}

div.smenu ul li {
float:none ;
margin:0;
padding:0;
width:100% ;
font-size:10px ;
font-weight:normal ;
}

div.smenu li a {
margin:0;
font-size:10px ;
font-weight:normal ;
display:block ;
margin-top:0px;
padding:5px ;
/*background:none !important;*/
color:#026094 ;
text-decoration:none;
text-align:left ;
}

div.smenu li a:hover {
background:#D9EAF4 ;
color:#000 ;
}



/* sous-sous menu */

div.ssmenu {
margin:0;
padding:0 ;
display:none;
position:absolute;
/*top:106px;*/
z-index:1000;
width:190px;
left:191px;
}


div.ssmenu ul {
margin:0 ;
padding:0;
padding-bottom:0px;
list-style:none;
border:1px solid #4998D0;
background:#fff;
width:100% ;
display:block ;
}

div.ssmenu ul li {
float:none ;
margin:0;
padding:0;
width:100% ;
font-size:10px ;
font-weight:normal ;
}

div.ssmenu li a {
margin:0;
font-size:10px ;
font-weight:normal ;
display:block ;
margin-top:0px;
padding:5px ;
/*background:none !important;*/
color:#026094 ;
text-decoration:none;
text-align:left ;
}

div.ssmenu li a:hover {
background:#D9EAF4 ;
color:#000 ;
}
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

Bonjour nickadele,

tout d'abord un grand merci pour ton aide, je vois que sur ce forum on peut compter sur l'attention des membres.

La solution que tu proposes aligne les deux blocs menu, mais mon problème n'est pas la, je me suis mal expliqué.

Dans le premier bloc menu, le lien sous menu 4.2 qui ouvre le second bloc a un background bleu au survol. Et je me retrouve avec un espace d'environ 3 pixels sous ce background. J'ai tenté de contraindre le bloc de plusieurs manière (hauteur en pixel, margin-bottom à 0...) et rien n'y fait, ce leger espace ne veut pas disparaitre sur IE.

Le problème ne survient que sur les liens vers les sous menu, je pense a un bug d'affichage spécifique a internet explorer car sur firefox il n'y a aucun soucis...
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Tu dois avoir un problème au niveau css
Va voir ici : http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu4.htm c'est un très bon exemple pour démarrer
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

Oui, c'est leur exemple de menu déroulant horizontal qui est a l'origine de mon menu en cascade. Je pense effectivement que cela peut se résoudre au niveau du css mais pour l'instant je sèche. J'ai posé la même question sur leur forum mais pas encore de réponse. En tous cas merci de ton aide ;o)
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

Bon, j'ai trouvé seul la solution après des heures d'arrachage de cheveux
Evidemment cela parait simple et évident une fois que l'on a trouvé
Il fallait tout simplement fermer la liste du premier sous-menu </li> avant d'ouvrir la
du sous-sous menu ;o)
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

c'est ce que je t'avais donné dans ma source !
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

C'est vrai nickadele, mais c'est a rien n'y comprendre car le bug persiste avec la source que tu m'as donné, je l'avais bien sur testée (essaye tu verras, il y a encore ce fameux espace sous le lien). Pourtant tu as raison, elle contenait la solution. Je vais éplucher cela et te dire ou se trouve la différence ;o)
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

Apparement ce qui fait la différence c'est que j'ouvre un élément de liste<li> avant le sous menu et je le ferme a la fin </li>, ainsi ca marche.