PB menu à plusieurs niveaux sous IE 6-7 [Résolu/Fermé]

Signaler
Messages postés
137
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
23 février 2010
-
Messages postés
137
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
23 février 2010
-
Bonjour,
Pour un site que je dois réaliser de toute urgence j'utilise un exemple de menu horizontal à plusieurs niveaux verticaux téléchargé à l'adresse suivante:
http://dosimple.ch/articles/Menus-dynamiques/
(c'est le menu horizontal)
sur IE 6 & 7 PC, mystère... le second niveau de menu vertical refuse obstinément de s'ouvrir, ce qui n'est pas le cas sous Mozilla Firefox & Apple Safari
Si qqn a une quelconque idée de ce qui peut être à l'origine de ce bug, des corrections ou ajouts qu'il faut faire, votre aide serait la bienvenue!
Vous pouvez voir le site temporairement sur http://www.fabspage.fr et une fois fini sur https://pavoifetes.com/

Merci d'avance!

Fabien

voici mon code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>C.i.P. Pavoifêtes</title>
<link href="css/pf.css" rel="stylesheet" type="text/css" />
<!-- script du menu -->
<script type="text/javascript" src="scripts/dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="scripts/browserdetect.js"></script>
<!-- script de l'anim -->
<script  type="text/javascript" src="scripts/AC_RunActiveContent.js"></script>
</head>

<body>
<div id="logocontainer">
  <table width="800" height="99" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="logogris" width="291"></td>
    <td width="509">&nbsp;</td>
  </tr>
</table>
</div> 
<div id="contenumenu">
 <ul id="menu">
  <li><a href="#" >L'ENTREPRISE</a>  </li>
  <li><a href="#">LE CATALOGUE 2008</a>
   <ul id="submenu">
    <li><a href="#">PAVOISEMENT</a>
     <ul id="submenu">
      <li><a href="#">National</a></li>
      <li><a href="#">Provinces et régions</a></li>
      <li><a href="#">Européen et mondial</a></li>
      <li><a href="#">Evènementiel et publicitaire</a></li>
     </ul>
    </li>
    <li><a href="#">DIVERS</a>
     <ul id="submenu">
      <li><a href="#">Banderoles et kakémonos</a></li>
      <li><a href="#">Affichage et signalétique</a></li>
      <li><a href="#">Structures pour visuels</a></li>
      <li><a href="#">Porte-affiches et vitrines</a></li>
     </ul>
    </li>
    <li><a href="#">GUIRLANDES, PETITS DRAPEAUX</a>
     <ul id="submenu">
      <li><a href="#">Guirlandes</a></li>
      <li><a href="#">Drapeaux de table et à main</a></li>
     </ul>
    </li>
    <li><a href="#">COLLECTIVITÉS</a>
     <ul id="submenu">
      <li><a href="#">Drapeaux de sociétés et d'assoc°</a></li>
      <li><a href="#">Drapeaux et bannières brodés</a></li>
      <li><a href="#">Médailles et décorations</a></li>
      <li><a href="#">Inaugurations et cérémonies</a></li>
      <li><a href="#">Écharpes et insignes</a></li>
      <li><a href="#">Matériel électoral</a></li>
      <li><a href="#">Pour les municipalités</a></li>
     </ul>
    </li>
    <li><a href="#">SUPPORTS ET MÂTS</a>
     <ul id="submenu">
      <li><a href="#">Pieds pour drapeaux</a></li>
      <li><a href="#">Supports muraux pour drapeaux</a></li>
      <li><a href="#">Mâts aluminium et accessoires</a></li>
      <li><a href="#">Mâts fibre de verre et accessoires</a></li>
      <li><a href="#">Exposition et réception</a></li>
     </ul>
    </li>
    <li><a href="#">SPORTS</a>
     <ul id="submenu">
      <li><a href="#">Signalisation sports et loisirs</a></li>
      <li><a href="#">Fanions et adhésifs</a></li>
      <li><a href="#">Ecussons et broderie</a></li>
      <li><a href="#">Marquage textiles, etc</a></li>
      <li><a href="#">Manifestations sportives</a></li>
      <li><a href="#">Coupes, médailles et trophées</a></li>
      <li><a href="#">Fêtes et manifestations</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="contact.html" >CONTACT & COMMANDES</a></li>
 </ul>
</div>
<script type="text/javascript">
    initMenu();
  </script>
<div id="contenu02">
</div>
</body>
</html>


Et voici mon code CSS:
@charset "UTF-8";
body {
	margin: 0px;
	background-image: url(../images/fondbody.gif);
	background-repeat: repeat;
	background-position: center;
}
#logocontainer {
	height: 100px;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/fondlogo.jpg);
	background-repeat: repeat;
}
#logogris {
	background-image: url(../images/logogris.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 99px;
	width: 291px;
}
#contenumenu {
	width: 800px;
	height: 21px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	position: fixe;
	background-image: url(../images/fondmenucontenu.jpg);
}
/* CSS du menu horizontal, bieler batiste */
#menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:600px;
    }

#menu ul{
    position:absolute;
    display:block;
    width:200px;
    /*margin:0;*/
	margin-left:0;
    padding:0;
    }
    
#menu li ul{
    visibility:hidden;
    }

#menu li li ul{
    position:absolute;
    margin-left:200px;
    margin-top:-15px;
	visibility:hidden;
    }
    
#menu li{
    list-style:none;
    width:200px;
    height:auto;
    display:inline;
    display/**/:block;
    float/**/:left;
    margin:0;
    padding:0;
    }
    
#menu li li{
    display:block;
    float:none;
    }
    
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
	
#menu a{
	display:block;
	width:200px;
	margin:0px;
	padding:0px;
    } 

#menu a:hover {
	background-color: #333333;
}
/*fin du CSS de menu de bieler batiste*/   

#menu li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 21px;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	text-indent: 6px;
}
#menu li a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 21px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-indent: 6px;
	background-color: #333333;
}
#submenu {
	/*Internet Explorer*/
	filter: alpha(opacity=95);
	/*Firefox*/ 
	-moz-opacity: 0.95;
	/*Safari*/ 
	opacity: 0.95; 
	background-color: #A9A9A9;
}
#contenu02 {
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

1 réponse

Si çà ne marche pas sous IE6, c'est que sa vient du JS. Je conseil de recoder le JS entièrement à partir d'un framework, comme Mootools, Prototype, ou Scriptaculous.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 61503 internautes nous ont dit merci ce mois-ci

Messages postés
137
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
23 février 2010
12
Merci edevouge... je jete un oeil à mootools ce soir , car j'ai un peu de temps...
Pour ceux qui comme moi connaissent mal le javascript, il y a les Transmenus de Aaron Boodman
à télécharger sur http://youngpup.net/projects/transmenus/
exemple sur http://youngpup.net/projects/transmenus/demos/photos/

J'ai utilisé cela dans l'urgence pour le site en question dans ce topic, c'est très efficace et modifiable facilement.

Un seul problème, le display de l'exemple est nickel sur tous les navigateurs que j'ai testés (Firefox win-mac, IE6-7win, Opera, Safari) mais pas tout à fait pour le site que je fais... C parfait uniquement sur IE6-7, sur les autres les débuts et fins des menus sont agrandis!!! Mystère? Je n'ai rien changé au code de ce coté-ci....bon je n'ai pas eu le temps de m'y pencher plus, mais si qqn trouve avant moi, qu'il me fasse signe svp!

pour prévisualiser le site, c'est toujours http://www.fabspage.fr

merci d'avance