begin process at 2012 05 29 16:39:23
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

vendredi 2 mai 2008 à 15:28:06 | Problème épineux de bug IE6 > Menu en cascade

leejunfan

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" " [ Lien ]">
<html xmlns=" [ Lien ]">
<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>
<div id="nav">
<ul id="navigationprincipale">
<a href="#" title="Ouvrir les sous-menus de la rubrique" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">Menu</a>
       <div id="smenu4" class="smenu" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"><ul><li><a href="#" onMouseOver="javascript:show();">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;</a></li><li><a href="#" title="Ouvrir les sous-menus de la sous-rubrique" onMouseOver="javascript:show('ssmenu3');"  class="ssmenu" >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;</a>
                            <!-- sous sous menu 3 -->
        <div id="ssmenu3" class="ssmenu" onMouseOver="javascript:show('ssmenu3');" onMouseOut="javascript:show();">
        <ul><li><a href="#">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;</a></li><li><a href="#">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;</a></li><li><a href="#">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;</a></li><li><a href="#">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;</a></li></ul>
        </div>
                            </li></ul></div></ul></div>
<body>
</body>
</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)
dimanche 4 mai 2008 à 11:56:32 | Re : Problème épineux de bug IE6 > Menu en cascade

nickadele

Membre Club Administrateur CodeS-SourceS
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>

<body>


<div id="nav">
<ul id="navigationprincipale">
<a href="#" title="Ouvrir les sous-menus de la rubrique" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">Menu</a>
</ul>
</div>
<div id="smenu4" class="smenu" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">
<ul>
<li><a href="#" onMouseOver="javascript:show();">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;</a></li>
<li><a href="#" title="Ouvrir les sous-menus de la sous-rubrique" onMouseOver="javascript:show('ssmenu3');"  class="ssmenu" >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;</a></li>
</ul>
</div>
<!-- sous sous menu 3 -->
<div id="ssmenu3" class="ssmenu" onMouseOver="javascript:show('ssmenu3');" onMouseOut="javascript:show();">
<ul>
<li><a href="#">Sous menu 4.2.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a href="#">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;</a></li>
<li><a href="#">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;</a></li>
<li><a href="#">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;</a></li>
</ul>
</div>

</body>
</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 ;
}
dimanche 4 mai 2008 à 19:17:17 | Re : Problème épineux de bug IE6 > Menu en cascade

leejunfan
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...
dimanche 4 mai 2008 à 19:47:58 | Re : Problème épineux de bug IE6 > Menu en cascade

nickadele

Membre Club Administrateur CodeS-SourceS
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
dimanche 4 mai 2008 à 19:53:01 | Re : Problème épineux de bug IE6 > Menu en cascade

leejunfan
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)
jeudi 8 mai 2008 à 16:00:17 | Re : Problème épineux de bug IE6 > Menu en cascade

leejunfan
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></ul> avant d'ouvrir la <div> du sous-sous menu ;o)
jeudi 8 mai 2008 à 16:23:04 | Re : Problème épineux de bug IE6 > Menu en cascade

nickadele

Membre Club Administrateur CodeS-SourceS
c'est ce que je t'avais donné dans ma source !
jeudi 8 mai 2008 à 18:52:05 | Re : Problème épineux de bug IE6 > Menu en cascade

leejunfan
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)
vendredi 9 mai 2008 à 15:56:25 | Re : Problème épineux de bug IE6 > Menu en cascade

leejunfan
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.


Cette discussion est classée dans : menu, display, important, nbsp, none

Répondre à ce message

Sujets en rapport avec ce message

Menu deroulant vertical, fonctions non compatibles avec internet explorer [ par maripaun2003 ] Bonjour, Je suis debutante en javascript. Pour mon site personnel j'ai crée un menu vertical deroulant avec le javascript. Voila mon probleme: quand o pb de menu [ par kanabinch ] Voici le code pour faire défiler un menu vertical, mon problème est qu'il ne se déroule pas sur la droite mais sur le menu.   "<a href="http://www.w3. Propriété display avec IE [ par initnocsib ] Bonjour,Voici un petit script qui fonctionne nickel sous Firefox, mais pas du tout sous IE function active(n){        document.getElementByI Centrer un layer [ par dalton40 ] Mon problème, je suis administrateur du site http://www.cercle-choral-dacquois.fr/sommaire.html  le menu déroulant est fait à partir de TIGRA MENU, le Problème d'alignement avec mon menu déroulant [ par kristale ] Hello, j'aimerai mettre mon menu déroulant (javascript/css) dans une cellule d'un tableau, mais je n'y arrive pas. Comment faire? Ca me le mets automa Problème alignement menu déroulant [ par Sandra28 ] Bonjour,J'aurais besoin de votre aide pour un problème sur un menu déroulant.Mon menu se déroule bien, mes liens fonctionnent, mais le problème que je Imprimer uniquement un tableau contenu dans une page [ par chezeu ] Bonjour je méne un projet. j'ai ma page html à l'intérieur de laquelle il y a il y a un tableau. et j ai un bouton Imprimer. je voudrais que lorque j' Display:none et images [ par sonofgod2 ] Bonjour,j'ai recement découvert un petit script qui me permet d'afficher ou de cacher des Divs, et ça pour les sites internet c'est trés appréciable :


Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,900 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)