Forum d'entraide PHPFrance

Bonjour,

J'ai un gros soucis sur lequel je viens de passer une 10aine d'heures :

J'ai ce code HTML pour le menu de navigation d'un site :

<div id="menu-navigation">
	<ul>
		<li><a href="index.php" title="Retour à la page d'accueil">Accueil</a></li>
		<li><a href="news.php" title="L'actualité de l'association">Actualité</a></li>
		<li><a href="presentation.php" title="Qui sommes-nous ?">Présentation</a></li>
		<li><a href="objectifs.php" title="Les objectifs de l'association">Objectifs</a></li>
		<li><a href="actions.php" title="Les actions de l'association">Actions</a></li>
		<li><a href="adhesions.php" title="Vous souhaitez vous renseigner sur l'adhésion à l'association ? Cliquez ici !">Adhésions</a></li>
		<li><a href="contact.php" title="Nous contacter...">Contact</a></li>
	</ul>
</div>

Ce menu est stylé en CSS :

<style type="text/css">
div#menu-navigation {
	position: absolute;
	top: 130px;
	width: 100%;
	margin: 0;
	background: blue;
}

div#menu-navigation ul {
	position: relative;
	width: auto;
	background: yellow;
	padding: 0 220px 0 0;
	margin : 0; 
	
}

div#menu-navigation ul li {
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

    padding: 0;
    margin: 0;
    border: 0;
    background: purple;
}

div#menu-navigation ul li a {
	display: inline-block;
	font-size: 1em;
	
	border: 0;
	padding: 0;
	margin: 0;
	
	background: red;
}
</style>

Le rendu du menu complet avec le header du site donne sous FF :

Les carrés violets sont des images. La bande bleue est un <p></p> pour lequel j'ai défini une background-color.
Pour ceux qui se posent des questions sur le coté artistique de la chose, je précise que les couleurs ne sont la que pour différencier les éléments et ne sont pas définitives

Je ne comprend pas d'ou viennent les espaces entre les li. Sous IE, je n'ai pas ce soucis.
Avez vous une idée ?

Merci,
netsupra

peux tu nous donner une page "en ligne" se serait plus simple pour faire des tests et t'apporter une solution rapide

Effectivement, voila donc
http://www.univ-paris8.fr/iee2/testfolder/

Netsupra

Salut !

c'est du aux espaces dans ton code !.. le navigateur considère que tu as laissé un espace pour qu'il soit affiché à l'écran ... donc il te l'affiche

en écrivant ainsi tu n'auras plus de pb :

					<ul>
						<li><a title="Retour a la page d'accueil" href="index.php">Accueil</a></li><li><a title="L'actualite de l'association" href="#">Actualite</a></li><li><a title="Qui sommes-nous ?" href="#">Presentation</a></li><li><a title="Les objectifs de l'association" href="#">Objectifs</a></li><li><a title="Les actions de l'association" href="#">Actions</a></li><li><a title="Vous souhaitez vous renseigner sur l'adhesion a l'association ? Cliquez ici !" href="#">Adhesions</a></li><li><a title="Nous contacter..." href="#">Contact</a></li>

					</ul>

@++

Nan mais ils sont sérieux chez Mozilla
Et on fait comment pour avoir du code propre
Bon ben en tout cas, merci beaucoup, j'ai cru qu'il n'allait plus me rester de cheveux sur la tete...
Netsupra