Menu css ne se déroule pas sur IE

[Maurice.Poupard]

Bonjour,

Je rencontre un problème avec IE qui refuse de dérouler mon menu horizontal. J'aurai souhaité connaître votre avis sur la question.

Merci par avance pour vos réponses.

/** menu niveau un **/

#menu {
  margin: 0;
  float: left;
  padding-top: 39px;
  padding-left: 240px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  letter-spacing:1.2px;
  text-decoration:none;
  text-transform: uppercase;
  position:relative;
  text-align:center;
}

#menu img {
  padding: 8px;
  display: block;
  opacity: 0.8;
    margin: auto;
}

#menu ul {
  margin:0;
  padding:0;
  list-style-type:none;
}

#menu a:hover {
  color: #fff;
  background-color:#8da85d;
  opacity: 0.8;
}

#menu li {
  float:left;
  margin:auto;
  padding:0px;
}

#menu li a {
  display:block;
  width:110px;
  color:#a6bb81;
  height: 100px;
 }

/** Niveau deux **/

#menu li ul {
  position: absolute;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 12px;
  letter-spacing:1.8px;
  left: -999em; /* "display: none" not seen by screen readers */
  list-style:none;
  z-index:999;
    margin:0;  
    padding:0;  
    margin:0 auto;
}

#menu li li ul img {
    vertical-align: middle;
  
}

#menu li li img{
    float: left;
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
}

#menu li li,
#menu li li:first-child {
  border: 0;
  margin-bottom: -1px; /* iPhone/iPad fix */
}

#menu li li a,
#menu li.active li a {
  width: 200px;
  background-color: #398235;
  margin: 0;
  text-transform: none;
  line-height:1.3em;
}


#menu li li:first-child {
  margin-top: 0px;
  border: 0;
}

#menu li ul a {
  width: 200px;
  height:35px;
  padding: 13px;
  margin: 0px;
}

#menu li li a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #7ca633;
  opacity: 1;
}

/** Niveau trois **/

#menu li li li:first-child {
  margin-top: 0px;
}

#menu li ul ul {
  margin: -61px 0 0 226px;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
  left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { /* nested under hovered items */
  left: auto;
}

[PieceOfCake]

Re : Menu css ne se déroule pas sur IE

Peut être qu'un lien vers le site en question ... ?

[Maurice.Poupard]

Re : Menu css ne se déroule pas sur IE

Malheureusement, il est en interne

[PieceOfCake]

Re : Menu css ne se déroule pas sur IE

Et bien ça va pas être facile de tester ton cas.

Pour espérer voir, il me faudrait (par exemple) installer un site neuf, mettre en place le même template que le tien (sans le connaître) insérer le CS que tu as mis en copie (seul isolé il doit fonctionner s'il est valide, mais quid lorsqu'il interagit avec les autres classes et définitions de la feuille de style ?)

On va encore sur ce coup là devoir faire appel à la boule de cristal de notre sorcière préférée

[lomart]

Re : Menu css ne se déroule pas sur IE

Bonsoir
Le problème se produit avec tous les IE ou seulement IE8 et précédent ?

[Maurice.Poupard]

Re : Menu css ne se déroule pas sur IE

Bonsoir
Le problème se produit avec tous les IE ou seulement IE8 et précédent ?

Bonjour,

IE 8 m'indique le message suivant :

Détails de l’erreur de la page Web
Message*: 'document.getElementById(...)' a la valeur Null ou n'est pas un objet.
Ligne*: 2
Caractère*: 2
Code*: 0
URI*: http://.../templates/intranet/js/sfhover.js

Je pense que le "js" n'est pas supporté par IE

[PieceOfCake]

Re : Menu css ne se déroule pas sur IE

A mon avis, il te dit là :
que lors de l'exécution de templates/intranet/js/sfhover.js, la page HTML n'est pas encore chargée et que l'objet document ayant la valeur null, la méthode (W3C de base document.getElementById() ne peut être invoquée.

pour moi le chargement du fichier javascript (si t'inquiètes pas IE le supporte et même avant bien avant IE8, pas toujours en suivant les mêmes règles que la W3C ou FireFox, mais il le supporte) dont l'URI est fourni se produit trop tôt avant la fin du chargement du document. En tout cas c'est l'interprétation du message

[Maurice.Poupard]

Re : Menu css ne se déroule pas sur IE

A mon avis, il te dit là :
que lors de l'exécution de templates/intranet/js/sfhover.js, la page HTML n'est pas encore chargée et que l'objet document ayant la valeur null, la méthode (W3C de base document.getElementById() ne peut être invoquée.

pour moi le chargement du fichier javascript (si t'inquiètes pas IE le supporte et même avant bien avant IE8, pas toujours en suivant les mêmes règles que la W3C ou FireFox, mais il le supporte) dont l'URI est fourni se produit trop tôt avant la fin du chargement du document. En tout cas c'est l'interprétation du message

Pour remédier à ça, il faudrait que je face quoi?

[Maurice.Poupard]

Re : Menu css ne se déroule pas sur IE

Problème résolu.

Merci à vous tous pour votre aide

[PieceOfCake]

Re : Menu css ne se déroule pas sur IE

Ça c'est un peu court, ce serait gentil avant de clôturer le billet d'expliquer ce que tu as changé pour que d'autres puissent en profiter à leur tout.

Merci pour eux.

[Maurice.Poupard]

Re : Menu css ne se déroule pas sur IE

Ça c'est un peu court, ce serait gentil avant de clôturer le billet d'expliquer ce que tu as changé pour que d'autres puissent en profiter à leur tout.

Merci pour eux.

J'ai juste rajouter ce code dans ma balise HEAD

sfHover = function() {
  var sfEls = document.getElementById("menu").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);