Problème affichage menu CSS dans IE

Résolu/Fermé
cecili - 20 févr. 2009 à 11:00
 burn73 - 19 juil. 2011 à 15:52
Bonjour,
J'ai conçu un menu CSS horizontal, avec une même couleur pour tous les liens lorsqu'ils ne sont pas cliqués. Il y a un changement de couleur (différente pour chaque lien ) au survol de la souris. J'ai utilisé pour cela des classes différentes.
Lorsque les liens correspondent à une page visité , ils sont en gris pour cela j'ai utilisé la propriété selected et une couleur lorsque le lien correspond à la page ne cours.

Cela marche très bien sous Firefox mais pas sous IE. En effet, lorsque je visite une des rubriques . Quand je lance directement une page le menu s'affiche bien mais lorsque je me rends sur une page via le menu les liens du menu disparaissent et ne réapparaissent que lorsque je passe la souris dessus Je ne sais vraiment pas comment résoudre ce problème alors si quelqu'un peut m'aider cela ce vraiment cool !

CODE HTML :

<div id="conteneur">
<div id="bandeau"><a id="image" href="index.html"title="Accueil" ></a></div>
<div id="main">
<ul id="menu">
<li class="violet" id=selected><a href="empreintes.html"title="Les empreintes numériques">LES EMPREINTES NUMERIQUES</a></li>
<li class="orange"><a href="creation.html"title="Fonctionnement">FONCTIONNEMENT</a></li>
<li class="bleu" ><a href="technologies.html"title= "Technologies utlisées">TECHNOLOGIES UTILISEES</a></li>
<li class="rouge"><a href="offre.html"title="Notre offre">NOTRE OFFRE</a></li>
<li class="gris"><a href="faq.html"title="Foire aux questions">FAQ</a></li>
</ul>
<div id="contenu">

CODE CSS :
/* MENU
------------------------------------------------------------------*/
#menu li {
display: inline ;
background:#FFFFFF ;
color:#000000 ;
margin-right: 2px;
margin-left:12px;
}

#menu li a
{
margin: -3.5px;
padding: 3px 4px 3px 5px ;
background:#FFF;
border: 1px solid #333333;
color:#000000 ;
font: 13px Arial, Helvetica, sans-serif;
line-height: 1.2em ;
text-align: center ;
text-decoration: none ;
}


#menu #selected a
{
background:#CCCCCC ;
text-decoration: none ;

}

#menu li.violet a:hover
{
background-color:#660099;
text-decoration: none ;
color:#FFFFFF;
}

#menu li.orange a:hover
{
background-color:#FF6600;
text-decoration: none ;
color:#FFFFFF;
}

#menu li.bleu a:hover
{
background-color:#000066;
text-decoration: none ;
color:#FFFFFF;
}

#menu li.rouge a:hover
{
background-color:#FF0000;
text-decoration: none ;
color:#FFFFFF;
}

#menu li.gris a:hover
{
background-color:#333333;
text-decoration: none ;
color:#FFFFFF;
}
MERCI d'avance pour votre aide !!!!!!!!

1 réponse

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
20 févr. 2009 à 12:15
salut,

je ne suis pas sûr que ça vienne de là mais c'est toujours bon à prendre.

pour les liens il faut que tu définisses les 4 états (lien, visité, survolé, actif) qui sont l'aspect par défaut, le lien quand la page existe dans l'historique du navigateur, quand le curseur est au dessus, au moment du clic quand le bouton est enfoncé.
attention, il faut les définir dans l'ordre !
a:link{}
a:visited{}
a:hover{}
a:active{}
0
J'ai pu résoudre le problème toute seule finalement ;) mais ton info est toujours très bonne à prendre ! merci
0
C'est joujours bon de dire comment ont résout un problème!
0