Sujet Précédent Sujet Suivant

! Urgent ! Problème menu CSS avec IE

cs_reedbedroom Messages postés 8 Date d'inscription mercredi 20 avril 2005 Statut Membre Dernière intervention 25 août 2011 - 25 août 2011 à 15:12
TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 - 26 août 2011 à 11:03
Bonjour à toutes et à tous,

Je rencontre un problème sur l'un des sites que je réalise actuellement et je suis vraiment dans l'impasse.

J'ai insérer un menu sur ce site en CSS+HTML, mais malheureusement celui ci ne s'affiche pas sur Internet Exploreur, alors qu'il fonctionne avec tous les autres navigateurs. Ce qui pose un problème plutôt important étant donné le nombre de personnes qui utilisent encore IE ! !

De plus, j'ai déjà utilisé ce menu sur un autre site et cela fonctionne très bien sous IE ! Incompréhensible donc...

Voici donc mon code CSS : 

/*Menu déroulant*/
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 27px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
color:#FFF;
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #4b4a4d; /* couleur de fond */        
        color : #ffffff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 120px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #ffffff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid #ffffff ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
position: absolute; /* Position absolue */
        width: 120px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #ffffff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid #ffffff; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid #ffffff ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #ffffff; /* On passe le texte en noir... */
        background: #c1022c; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}


Et voici mon code HTML (une simple liste) : 


                  <li>[index.php?page=accueil.php Club]
                    
                      <li>[index.php?page=president.php Mot du Président]</li>
                      <li>[index.php?page=historique.php Historique]</li>
                      <li>[index.php?page=orga.php Organigrame]</li>
                    
                  </li>
                  <li>[# Actualités]
                    
                      <li>[index.php?page=agenda.php Agenda]</li>
                      <li>[index.php?page=resultats.php Résultats]</li>
                      <li>[index.php?page=champion.php Champions]</li>
                      <li>[index.php?page=competitions.php Compétitions]</li>
                    
                  </li>
                  <li> [# Sections]
                    
                      <li>[index.php?page=ski.php Ski]</li>
                      <li>[index.php?page=freeski.php FreeSki]</li>
                      <li>[index.php?page=snowboard.php Snowboard]</li>
                      <li>[index.php?page=fanclub.php Fan Club]</li>
                      <li>[index.php?page=velo.php Vélo]</li>
                    
                  </li>
                  <li>[# Snowpark]
                    
                      <li>[index.php?page=agenda.php Agenda]</li>
                      <li>[index.php?page=actus_snowpark.php Actualités]</li>
                      <li>[index.php?page=snow_team.php Team]</li>
                      <li>[index.php?page=snow_securite.php Sécurité]</li>
                      <li>Facebook</li>
                      <li>www</li>
                    
                  </li>
                  <li>[# Partenaires]
                    
                      <li>[index.php?page=entreprise_partenaires.php Ski Club Entreprise]</li>
                      <li>[index.php?page=club_partenaires.php Club Des Sports]</li>
                      <li>[index.php?page=snow_partenaires.php Snowpark]</li>
                    
                  </li>
                  </li>
                  <li>[# Infos Pratiques]
                    
                      <li>[index.php?page=carreneige.php Carte Neige]</li>
                      <li>[index.php?page=acces.php Accés & Horaires]</li>
                      <li>[index.php?page=liens_utiles.php Liens Utiles]</li>
                      <li>[index.php?page=contact.php Contact]</li>
                    
                  </li>


Voyez vous quelque chose ? !

Si vous avez besoin des URL des deux sites (celui qui fonctionne et celui qui ne fonctionne pas) n'hésitez pas à me demander :)

Merci de votre aide !

1 réponse

Réponse 1 / 1
TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
26 août 2011 à 11:03
Salut,

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */

Ceci est faux, ça fais maintenant plusieurs années qu'Internet Explorer reconnais ce sélecteur. Seules les versions d'IE inférieurs ou égales à 6 ne le connaissent pas, or aujourd'hui la dernière version stable d'IE est la 9. IE6 est une très vielle version totalement obsolète qui est morte et enterrée. À moins que le contrat qui te lie au client spécifie cette version (ce qui est une honte), tu n'as donc pas à en tenir compte et tu dosi te référer aux versions récentes d'IE.
0

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
comment créer un sous menu
msi79 -
msi79 -

8 réponses
CSS MAP et AREA
gabs77 -
gabs77 -

9 réponses
créer un menu principal
cs_valsta -
valsta -

5 réponses
Menu et sous menu
tennisman59 -
maili20 -

11 réponses
Rejoignez-nous