Un <li> récalcitrant

Bonjour,

Je suis confronté à un problème mineur et très bête.
J'ai une div placée tout en haut de ma page faisant office d'accès rapide à certaine partie du site (on peut considérer ça comme des liens d'évitement).
Cette div à pour dimension 1024*10, ce qui représente une très faible portion pour sa hauteur.
Quand je place une balise <li> à l'intérieur pour afficher mes liens (en display:inline), le texte met automatique un margin-top que je ne peux pas supprimer.
En clair, mes liens sont toujours trop bas par rapport au background de ma div. C'est très embêtant parce que ça fausse complètement la structure de ma page.

J'ai essayé en plaçant mes balises <li> en display: inline-block pour pouvoir gérer le margin-top (ou le top, ou encore le padding-top), mais rien n'y fait. Je ne trouve pas de solutions et quand je met un float:left sur mes balises <li>, mon background disparait.

Voilà le code html de la div:

<div id="upbar"><div id="upbar-inside">
	<ul id="speed-menu">
		<li><a href="index.html">ACCUEIL</a></li>
		<li><a href="index.html">CONTACT</a></li>
		<li id="upbar-connexion"><a href="index.html">CONNEXION</a></li>
	</ul>
</div></div>

Voilà le code css que j'applique:

#upbar {
	margin: 0 auto;
	width: 1024px;
	position: relative;
}

#upbar-inside {
	background: transparent url('../images/upbar.png') no-repeat scroll 0 0;
}

#upbar ul#speed-menu {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-top: 0px;
	padding-left: 3px;
}

#upbar ul#speed-menu li{
	color: #1091C9;
	font-size: 8px;
	margin-right: 2px;
	display: inline;
}

#upbar ul#speed-menu li#upbar-connexion{
	position: absolute;
	right: 0;
	top: 0;
}

#upbar ul#speed-menu li a{
	font-family: Verdana, "Trebuchet MS", Tahoma, Helvetica, Sans-Serif;
	color: #1091C9;
	text-decoration: none;
}

Et voilà son rendu à l'écran:


Les deux premiers liens sont mal placés alors que pour le 3eme, il n'y a pas de problèmes...

Merci pour vos réponses.
Modifié par DiaBossfire (16 Feb 2009 - 11:27)

Bonjour et bienvenue,

- as-tu consulté l'oracle Firebug?
- avec la RAZ suivante, qu'est-ce que ça donne?

ul {
margin: 0;
padding: 0;
}

Bonjour et merci de l'accueil ^^

Oui j'ai déjà consulté cet oracle et je le fais en permanence durant tous mes développements Web
Pour la RAZ, je l'avais déjà appliqué (j'en ai même placé partout dans mon code CSS, en rajoutant aussi top: 0), mais rien n'y fait.
C'est toujours la même chose et ça commence à me sortir les yeux de la tête, surtout quand on voit que c'est un problème vraiment stupide pour seulement quelques lignes de code...

DiaBossfire a écrit :
Oui j'ai déjà consulté cet oracle et je le fais en permanence durant tous mes développements Web

Il t'a donc permis d'identifier l'origine de l'espace indésirable, par le jeu magique des blocs de couleurs qui indiquent marges, padding et zone de contenu des éléments. Félicitations, ton problème est identifié et donc résolu.

Non? Alors je te conseille de t'y remettre, et/ou de nous fournir une URL pour qu'on puisse tester ça directement avec nos yeux aguerris.

Bonjour DiaBossfire,
Effectivement, avec une structure telle que celle-ci:

<div id="upbar">
<ul>
<li><a href="#">accueil</a></li>
<li><a href="#">contact</a></li>
<li id="droite"><a href="#" title="">connexion</a></li>
</ul>
</div>

et des styles comme suit:

* { margin:0; padding:0; }
ul {
	padding:0 0 0 3px; 
	background-color: orange;
	font: 8px Verdana, "Trebuchet MS", Tahoma, Helvetica, Sans-Serif;
	color: #1091C9;
}
li { display:inline; }
li a:link, 
li a:visited, 
li a:hover, 
li a:active { text-decoration: none; color:#1091c9; }
#droite {position: absolute; right: 0; }
#upbar { margin: 0 auto; width: 1024px; position: relative; }

Alors le menu part sur une base correcte, enfin, si j'ai bien compris, c'est ce que tu attends (attention, testé uniquement avec Safari 3 et Firefox 3).

As-tu réellement besoin des autres <div>?

Bonjour,

Merci beaucoup speedlab. C'est exactement ce que je recherchais. J'ai gardé mes 2 div et c'est toujours ok.

J'ai juste ré-adapté le code à mes besoins mais tu m'as bien aidé !! Par contre, je ne comprends toujours pas pourquoi il y avait un problème avec mon code initial.

Si vous avez des explications, je suis preneur ^^. Merci encore !