Problème d emenu avec IE

05 nov. 2005, 14:09

Bonjour,
J'ai fait un menu avec des <ul> et <li> horrizontal mais avec IE, il me fait un drôle de truc

Je ne sais pas c'est IE qui connait pas un truc dans le CSS ou alors un autre truc mais je voulais savoir si il y avait une solution!
Voici mon code HTML :

Code : Tout sélectionner

<ul id="topnav">
   <li><a title="Nous contacter" href="?fr/Nous-contacter">Nous contacter</a></li>
   <li><a title="Confidentialité" href="?fr/Confidentialite">Confidentialité</a></li>
   <li><a title="Plan du site" href="?fr/Plan-du-site">Plan du site</a></li>
   <li class="active"><a title="Accueil" href="?fr/Accueil">Accueil</a></li>
 </ul>

Et le code CSS :

Code : Tout sélectionner

#topnav{
font-size:12px;
margin:0;
padding:0;
list-style:none;
}
#topnav li a{
background:#f4feea url(images/navimg.gif) no-repeat 0;
text-align:center;
height:23px;
width:116px;
margin:167px 0 0 5px;
padding:10px 0 0 0;
float:right;
text-decoration:none;
}
#topnav li.active a{
background:#fff url(images/navimg.gif) no-repeat top;
margin:167px 0 0 45px;
font-weight:bold;
float:left;
}
#topnav li a:hover{
background:#fdf4ff url(images/navimg.gif) no-repeat bottom;
}
#topnav li.active a:hover{
background:#fff url(images/navimg.gif) no-repeat top;
}

Une petite URL si vous voulez voir : http://0632440105.free.fr/test/
Merci d'avance!

05 nov. 2005, 17:18

Primo, quand tu veux pas mettre de margin et de padding, tu mets pas 0, tu mets none, c'est plus précis. Ensuite, je te conseille de séparer les background-image et les background-color, c'est le genre de truc qui mèle Internet Explorer et finalement, moi, je le vois pas trop mal ton menu sur I.E....

05 nov. 2005, 17:50

Tu applique certaines propriétés aux mauvais éléments. Voici une proposition testée sous Firefox et IE pour le même résultat (Partie menu seulement (#topnav):

Code : Tout sélectionner

#topnav{
    position: relative;
    width: 100%;
    font-size:12px;
    height: 33px;
    margin:0;
    padding:0;
    list-style:none;
}
#topnav li {
    width: 116px;
    height: 33px;
    float:right;
    margin: 167px 0 0 3px;
}
#topnav li a{
    background:#f4feea url(images/navimg.gif) no-repeat 0;
    text-align:center;
    width:116px;
    text-decoration:none;
    display: block;
    line-height: 33px
}
#topnav li.active{
    margin-right: 145px;
}
#topnav li.active a{
    background:#fff url(images/navimg.gif) no-repeat top;
    font-weight:bold;
}
#topnav li a:hover{
    background:#fdf4ff url(images/navimg.gif) no-repeat bottom;
}
#topnav li.active a:hover{
    background:#fff url(images/navimg.gif) no-repeat top;
}

Et je te signale qu'une feuille de style sur une seule ligne ou prèsque, c'est imbuvable, ça donne pas vraiment envie de se plonger dedans: je serai curieux de te voir aller dans ton propre code pour une refonte graphique dans deux ans

05 nov. 2005, 18:57

Merci beaucoup cyrano sa marche!
Sinon alexbad je suis pas du tout d'accord!
la propriété none pour l'attribut padding et margin n'existe pas!

Pour le background je suis d'accrord mais c'est pour IE 2.0 que ca marche pas ! Et pour l'instant j'ai eu aucun visiteur avec IE 2.0!

05 nov. 2005, 18:59

Si si, elle existe. C'est comme pour les border, tu mets sans doute pas border:0 lorsque tu en veux pas, tu dois plutôt mettre border:none

06 nov. 2005, 13:40

Si si, elle existe. C'est comme pour les border, tu mets sans doute pas border:0 lorsque tu en veux pas, tu dois plutôt mettre border:none

Pour border je suis d'accord mais pour padding et margin t'a qu'a faire valider ton donc au validateur du W3C tu vera bien que c'est pas conforme.

Problème d emenu avec IE

Qui est en ligne