Decallage sous IE

Question

kabmaster

17 Sep 2009 à 10:24

bonjour,
Je rencontre un problème de decallage de menu inclu dans une <Div> puis <Ul><li>, sous IE.
Sous firefox, le menu se colle bien a gauche , sous IE, un petit espace me decale le menu de qiuelques pixels.
J'ai essayé plusieurs solutions de text-align left et autres mais rien n'y fait , le menu reste decalé .
Quelqu'un a une idee ?
le code :

<style type="text/css">
.menu{text-align: left;margin:0 auto; padding:0; height:50px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}

.menu li{background:#0BCF00;text-align: left;padding:0; margin:0; list-style:none; display:inline;}

.menu li a{border-right : 1px solid #fff;background:#0BCF00;text-align: left;float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}

.menu li a span{text-align: left;line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background: #DDFFEE;background-position:0px -60px; color:rgb(255,255,255);}

.menu li a:hover span{background-position:100% -60px;}

.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}

.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

#main {position: relative; z-index: 5;background:#223C49;text-align:left;}
</style>


</head>


<body>

<div id="main">
<ul class="menu"">
  <li><a href="#" class="active"><span>PAGE1</span></a></li>
  <li><a href="#"><span>PAGE2</span></a></li>
  <li><a href="#"><span>PAGE3</span></a></li>
  <li><a href="#"><span>PAGE4</span></a></li>
</ul>


</body>
</html>

Modifié par kabmaster (17 Sep 2009 - 10:46)

Mikachu

17 Sep 2009 à 10:29

Salut,

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Decallage sous IE