Sujet Précédent Sujet Suivant

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

leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008 - 2 mai 2008 à 15:28
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008 - 9 mai 2008 à 15:56
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

Réponse 1 / 8
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
4 mai 2008 à 11:56
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 ;
}
0
Réponse 2 / 8
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
4 mai 2008 à 19:17
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...
0
Réponse 3 / 8
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
4 mai 2008 à 19:47
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
0
Réponse 4 / 8
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
4 mai 2008 à 19:53
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)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
8 mai 2008 à 16:00
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)
0
Réponse 6 / 8
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
8 mai 2008 à 16:23
c'est ce que je t'avais donné dans ma source !
0
Réponse 7 / 8
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
8 mai 2008 à 18:52
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)
0
Réponse 8 / 8
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
9 mai 2008 à 15:56
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.
0

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
comment créer un sous menu
msi79 -
msi79 -

8 réponses
créer un menu principal
cs_valsta -
valsta -

5 réponses
Menu et sous menu
tennisman59 -
maili20 -

11 réponses
[C] Retour au début du programme
cs_thekid06 -
CptPingu -

3 réponses
Rejoignez-nous