Sujet Précédent Sujet Suivant

PB menu à plusieurs niveaux sous IE 6-7

Résolu/Fermé
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 - 18 avril 2008 à 12:05
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 - 25 avril 2008 à 01:32
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;
}
A voir également:

1 réponse

Réponse 1 / 1
edevouge
18 avril 2008 à 14:05
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
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
25 avril 2008 à 01:32
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
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Freebox bloquée à l'étape 6
Linda -
brupala -

14 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses