[Résolu] Décalage UL avec list-style none sur FIREFOX

Bonjour à tous,

tout d'abord merci aux créateurs de cet excellent site pour les précieuses informtions qu'on y trouve.

Je suis confronté à un problème lors de l'utilisation de la balise UL pour un menu horizontal .

en effet, si sur IE, le menu se place correctement (centré sur la page), sur FIREFOX le premier élément du menu est décalé de quelques picels (en fait l'indentation native d'une liste à puces).

Quelqu'un peut-il m'aider à corriger ce bug d'affichage, dois-je utiliser une marge négative pour FF ?

merci d'avance

Zico
Modifié par zicomatic (01 Jul 2009 - 14:37)

Bonjour,

Sans code il va être difficile de t'aider...

Si tu pouvais nous montrer une page en ligne ça serait encore mieux

Salut,

Si tu n'as pas fait de "reset" CSS, les valeurs de marges intérieures et extérieures sont différentes sur IE et FF. En mettant un padding:0 et margin:0 sur ton ul tu devrais obtenir le même résultat sur les deux navigateurs.

Désolé pour cet oubli de taille

Le HTML ici http://www.alteadis.fr/index_d.php

Le Code CSS

/*Mise en page du menu*/
#menu{
	position:absolute;
	width:auto;
	top:175px;
	height: 25px;
	margin: 0 auto;
	list-style-type: none;
	border-bottom:solid #1f4b85 1px;
}
#menu li{
	margin-left:-20;
	float:left ;
	text-align:center;
}

#menu li a{
	margin-left:-20;
	width: 160px ;
	background:#a6c2d0 url(images/iface/btn_menu.jpg) no-repeat scroll left top;
	font: 12px "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
	line-height: 25px ;
	color : #FFF;
	display: block ;
	text-decoration: none ;
	}
#menu li a:hover,#menu li a:focus,#menu li a:active {
	width: 160px ;
	background:#a6c2d0 url(images/iface/btn_menu.jpg) no-repeat scroll left -30px;
	font: 12px "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
	line-height: 25px ;
	color : #009;
	display: block ;
	text-decoration: none ;
	}

Merci d'avance

Zico
Modifié par zicomatic (01 Jul 2009 - 09:15)

Pourrais-tu éditer ton message pour mettre les portions de code entre [ code] et [ /code] (sans les espaces afin de les rendre plus facilement lisible.

margin-left:-20;

-20 quoi ? carottes ?

Mais je réitère quand même ce que j'ai dit, avec plus de précision cette fois-ci :

Un padding:0 sur ton #menu règle le problème de décalage sur Firefox.

Désolé de n'avoir pas été aussi réactif que vous ne l'avez été à mes questions, mais j'étais sur d'autres fronts...

la solution d'Agylus fonctionne (je vais pouvoir relire les tutoriels... )

merci au passage Laurie-Anne pour les corrections

à une prochaine certainement.

Zico

Tu considère donc le problème comme étant [résolu] ?