[RESOLU] Marge par défaut d'un menu horizontal

C'est petit à petit que j'intègre les bases du CSS. Pas simple comme outil, mais tellement puissant quand on sait s'en servir.

En me basant sur le tutoriel de Raphaël "Comprendre l'héritage et la parenté des styles CSS" pour créer un menu, je fus surpris de me retrouver avec un menu décalé d'environ 40px vers la droite alors que rien dans le CSS ne le spécifie:

body {
padding: 0;
font: 14px Verdana, sans-serif;
}
.menu {
list-style-type: none;
}
.menu li {
float: left;
}
.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}
.menu a:active {
background: gray;
color: #fff;
}

J'imagine que ce ne sont pas les quelques pixels de marge de rendu par défaut des navigateurs qui créent ce bug...

Le seul moyen de le contourner est d'ajouter au body une marge négative de 40px. Je me demande bien pourquoi.

Quelqu'un aurait-il une explication?
Modifié par Neossir (19 Apr 2009 - 02:21)

Merci Sylvain pour ta réponse si prompte.
[EDIT: la réponse en question se trouve ci-dessous]

Mon interrogation venait justement du fait que le rendu était exactement identique dans les deux butineurs.
Pourtant une marge automatique n'est pas appliquée systématiquement puisque de nombreux sites (y compris alsacréations ) se passe très bien d'une marge latérale.

Dans tous les cas, ramener le menu à "0" en utilisant une marge négative est-elle open standard compatible?
Modifié par Neossir (19 Apr 2009 - 02:22)

Oup's désolé fausse manip de ma part
Je reprends :
Par défaut la balise ul à une marge exterme ou interne de 40px, comme tu l'as peut-être constaté grace à l'outil de Julien Royer ou aux explications de Raphael

Annuler ces marges par défaut sur la balise ul suffit à résoudre ce "problème" :

ul {
	margin: 1em 0 1em 24px;
	padding: 0;
}

Pour reprendre l'exemple de Raphael

Cdt,
Sylvain

Parfaitement limpide ton explication, je comprends mieux. Je n'avais pas compris qu'on pouvait écraser si facilement les valeurs par défaut du navigateur, merci!

Et pour aller plus loin et coller complètement le menu en haut à droite, il suffit de rajouter

body {
	padding: 0;
	margin:0;
	font: 14px Verdana, sans-serif;
}

Cependant le résultat a une drôle d'allure .