[Résolu] Mon menu CSS horizontal empiète sur l'élément suivant

Bonjour à tous,

Je rencontre actuellement un problème sur mon site Internet avec mon menu horizontal qui "déborde" sur l'élément suivant. Je ne sais pas comment appeler ce phénomène, ni comment le cerner, alors je m'en remets à vous (d'autant plus que je me rappelle avoir rencontré le même problème lors de la création d'un précédent site web).

Pour visualiser le problème, je vous invite peut-être à vous rendre directement sur ma page. Vous y verrez 4 onglets horizontaux qui devraient venir se poser sur le bord supérieur du cadre de contenu, mais qui, en fait, le "mangent" de 2 pixels.

Voici une version expurgée de la hiérarchie de ma page :

<div id="icone">
<div id="logo">
<a><img src="machin" /></a>
</div>

<div id="menu">
<ul>
<li><a>philosophie</a></li>
<li><a>politique</a></li>
<li><a>culture</a></li>
<li><a>atelier</a></li>
</ul>
</div>
</div>

<div id="conteneur">
<div id="contenu">
</div>
</div>

Et ci-dessous le CSS relatif à cette section :

#icone {
	background:url('machin') no-repeat bottom right;
	padding:0;
	margin:0 auto 0 auto;
	width:740px;
	vertical-align:bottom;
}
	
#logo {
	padding:0 0 0 10px;
	margin:30px 0 30px 0;
}

#menu {
	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
	list-style:none
}

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

#menu li {
	display:inline;
	margin:0 0 0 0;
	padding:0 0 0 0;

}

#menu li a {
	margin:0 10px 0 0;
	padding:4px 10px 4px 10px;
	color:black;
	text-decoration:none;
	font-weight:bold;
	font-size:13pt;
	font-variant:small-caps;
	background:white;
	border:2px solid black;
	border-width:2px 2px 0 2px;
}

#menu li a:hover, #menu li a:focus, #menu li a:active {
	color:#60A219;
	background:#BFEF86;
}

#conteneur {
	width:740px;
	margin:0 auto;
	padding:0;
	background:white;
	border-style:solid;
	border-width:2px 4px 4px 2px;
	border-color:black;
	border-radius: 10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
}

#contenu {
	background:white;
	margin:0 100px 0 100px;
	padding:0 0 15px 0;
}

J'espère que vous pourrez apporter une réponse et une solution à ce phénomène. Excusez-moi à l'avance si c'est évident, mais je fais littéralement un blocage dessus... et je ne suis webmaster qu'à mes heures perdues.

Merci à la communauté !
Dorian
Modifié par dodormir (16 May 2010 - 14:51)

Tu dois pouvoir résoudre ce phénomène simplement, en ajoutant une auteur de ligne à l'élément li de ton menu.

#menu li { 
    display:inline; 
    margin:0 0 0 0; 
    padding:0 0 0 0; 
    line-height:22px;
}

En effet, moust, tu as raison, le problème disparaît en spécifiant la hauteur des éléments li. C'est une très bonne nouvelle, mais je ne comprends pas très bien quel principe gouverne cette règle. Je crois par ailleurs que cela n'est expliqué nulle part sur Alsacréations (notamment dans les articles concernant la création de menus en CSS).

Avis aux rédacteurs d'astuces

Merci en tout cas, moust !