28172 sujets

CSS et mise en forme, CSS3

Menu déroulant s'affichant dans Chrome mais pas dans IE

Bonjour à tous,

Voici mon problème, j'ai créer un menu déroulant avec quelques propriétés CSS3 et notamment box-shadow et text-shadow. Sur Google Chrome cela marche très bien, cependant sur les anciennes versions d'IE le menu principal s'affiche sans les propriétés CSS3 (ça c'est normal) mais mes sous menus, eux, ne s'affichent pas du tout et je ne vois pas du tout pourquoi...

Vous pouvez tester si vous voulez : j'ai constaté le résultat en utilisant Chrome et IE8.
Voici l'adresse du site : www.scodijon.fr

Merci.

Au passage voici mon code css concernant le menu

/* Menu déroulant */
#Menu 
ul { 
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#Menu li{
  background : #ed1e24;
  height : 40px;
  padding : 0 7px;
  float : left;
  margin : 0 0px;
  width : auto;
  line-height : 30px;
  text-transform : uppercase;
  font-size : 14px;
  font-weight : bold;
  /*-moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;*/
        -webkit-box-shadow:0 0 5px rgba(0,0,0,1), 
                       0 -1px 0 rgba(255,255,255,1);
       -moz-box-shadow:0 0 5px rgba(0,0,0,1),
                       0 -1px 0 rgba(255,255,255,1);
            box-shadow:0 0 5px rgba(0,0,0,1),
                       0 -1px 0 rgba(255,255,255,1);
}
#Menu li:hover{
-webkit-box-shadow:1px 1px 5px black inset;
       -moz-box-shadow:1px 1px 5px black inset;
            box-shadow:1px 1px 5px black inset;
}

#Menu li a {
  color : #fff;
  padding : 0;
  margin : 0;
  line-height : 45px;
  text-shadow:0px 1px 0px rgba(0,0,0,1);
}

#Menu li a:hover{
  color : #000;
  text-shadow:0px 1px 0px rgba(255,255,255,0.5);
}

/* Second niveau */

#Menu li ul{
  position : absolute;
  width : 210px;
  font-size : 12px;
  background-color : #ed1e24;
  left : -999em ;/* "display : none" not seen by screen readers */
  border :0;
  margin-left : -1px;
  margin : -4px;
}

#Menu li li, #Menu li li:first-child {
  border : 0;
  margin-bottom : -1px; /*iphone, ipad fix*/
}

#Menu li li a {
  display : inline-block;
  width : 230px;
  border-top : 1px solid #fff;
  height : 20px;
}

#Menu ul a:hover {
  color: #000;
  text-decoration: none;
}

#Menu ul a {
  text-decoration: none;
  background-color: #ed1e24;
}

/* 3ème niveau et plus */

#Menu li ul ul { 
  margin: -30px 230px 40px;
  width : 120px;
}

#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;
}
Bonjour,

Ton sous-menu fonctionne sous IE8 mais pas sous IE<8.
Tu devrais peut être essayer de corriger les problèmes suivants :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nouveausite.scodijon.fr%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Après un petit ménage tiens nous au courant si le problème persiste pour que l'on fasse un examen plus approfondi. Mais vu le nombre d'erreurs actuelles j'ai pas trop envie de m'y pencher... Smiley cligne
Quand j'ai vus le nombre d'erreurs j'ai prit peur mais en fin de compte je ne peux rien y faire... Smiley confus

Je m'explique, mon site est administré par Joomla et toutes les erreurs marqués sont dans le code créé automatiquement par Joomla ou à cause de l'intégration de php dans le site. Smiley ohwell
Bonjour,

Je pense que certains de tes problèmes de structure ne viennent pas de joomla, cela provient peut être de ton template. Tu as par exemple des scripts qui sont appelés avant ta balise "<head>" et après ta balise "</body>". Le validateur signale aussi que des balises ne sont pas ouvertes ou fermées correctement. Essai déjà de corriger ça. Smiley cligne
Sujet clos
Aller à