Une marge apparet sous firefox et pas sur IE!

Bonjour,
j'ai une marge qui apparait en haut au niveau de mon menu lorsque je suis sous firefox alors que sur ie elle n'apparait pas.

mon css est le suivant :

body{
	background:url(images/fond.jpg) repeat-x top #FFFFFF;
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:9px;
}
.droite{
	text-align:right;
}
.clear{
	clear:both;
}
a{
	color:#0fafcf;
	text-decoration:none;
}
a:hover{
	color:#000;
}
/*/////////////////////////////////////
		    Le Header
/////////////////////////////////////*/
#top{
	background:url(images/banniere.png) no-repeat transparent;
	width:900px;
	height:193px;
}

/*/////////////////////////////////////
		    Le conteneur
/////////////////////////////////////*/
#conteneur{
	width:900px;
	margin:0 auto;
	}


/*/////////////////////////////////////
		    Le menu
/////////////////////////////////////*/
#menu {
	height:30px;
	width:800px;
	background-image:url(images/btn_vert.png);
	margin-left: auto;
	margin-right: auto;
}

#menu ul li{
	float:left;
	padding:0;
	list-style:none;
}

#menu ul li a{
	height:30px;
	font-size:12px;
	line-height:30px;
	display:block;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	padding: 0 5px 0 5px;
	background-repeat:repeat-x;
	background-position:top left;
}
#menu ul li a:hover{
	height:30px;
	line-height:30px;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	padding: 0 5px 0 5px;
	background-repeat:repeat-x;
	background-position:bottom left;
}
/* Les différentes couleurs des menu */
#menu ul li a.bleu{
	background-image:url(images/btn_bleu.png);
}
#menu ul li a.vert{
	background-image:url(images/btn_vert.png);
}

ma page html avec l'inclusion des div est la suivante.

<div id="conteneur">
<div id="top">Bienvenu sur mon site</div>
<div id="menu">
	<ul>
    	<li><a class="vert" href="index.html">texte</a></li>
        <li><a class="vert" href="#">texte</a></li>
        <li><a class="vert" href="#">texte</a></li>
        <li><a class="vert" href="#">texte</a></li>
        <li><a class="vert" href="#">texte</a></li>
        <li><a class="vert" href="#">texte</a></li>
        <li><a class="vert" href="#">texte</a></li>
    </ul>
	</div>
</div>

sa fait 2 jours que j'essai de resoudre ce probleme... pouvez vous m'aider ?
Modifié par fabrice88 (26 Dec 2008 - 23:52)

Salut,

ton problème est dû au fait que l'élément UL n'a pas les mêmes valeurs par défaut de margin et de padding dans les navigateurs.
A tester :

#menu ul {
	margin:0;
	padding:0;
}

Pour en savoir plus lire Le rendu par défaut des éléments HTML et tester cet outil dans IE et dans FF.


Edit: en passant le DIV #menu est inutile. Tu aurais pu faire directement <ul id="menu">
Tu aurais également pu remplacer ton DIV "Bienvenue..." par un H1 (ou Hx mais en tous cas un titre )
Modifié par Heyoan (26 Dec 2008 - 23:57)

Merci beaucoup sa fonctionne en ajoutant votre code dans mon css.
j'ai cependant une autre petite question qui n'a rien a voir avec la premiere.

pour centrer mon menu a gauche je met dans mon menu ul li

float:left;

maintenant si je veus le centrer a droite si je met

float:right;

mon menu est effectivement centrer a droite mes le menu est inversé.

au lieu d'avoir donc accueil - presentation - contact
j'ai contact - presentation - accueil

existe il un moyen pour que l'ordre du menu reste dans le bon ordre ?
Modifié par fabrice88 (27 Dec 2008 - 12:30)

Re',

fabrice88 a écrit :

existe il un moyen pour que l'ordre du menu reste dans le bon ordre ?

Il ne faut pas utiliser le float mais display: inline sur les LI et rajouter text-align: right sur le UL. L'inconvénient de cette technique est que tu ne peux plus utiliser display: block sur les liens (car sinon ils vont se superposer) et qu'il faut utiliser à la place padding. Un exemple :

#menu ul {
	margin: 0;
	padding: 0;
	text-align: right;
}

#menu ul li {
	display:inline;
	padding:0;
	list-style:none;
}

#menu ul li a{
	/* height:30px; */
	font-size:12px;
	line-height:30px;
	/* display:block; */
	text-decoration:none;
	text-align:center;
	color:#FFF;
	/* padding: 0 5px 0 5px; */
	padding: 8px 5px;
}

J'en profite pour te préciser que background-repeat et background-position sont inutiles sans image de fond et également qu'il est inutile de redéfinir tous les attributs du a:hover mais seulement ce qui change.

Lire également : Créer des menus simples en CSS.
Modifié par Heyoan (27 Dec 2008 - 13:07)