28220 sujets

CSS et mise en forme, CSS3

Bonjour,

je suis en train de monter un site web, j'essaye de faire ça proprement, avec une jolie CSS toussa...

J'ai un petit souci avec l'affichage d'une liste en inline, qui se colle bien en haut de sa div avec IE mais qui laisse une grosse marge avec Firefox. Je ne l'explique pas...

La page est visible sur : http://coat.effisk.net/

Le bout de code correspondant :

	<div id="header">
		
			<ul id="navlist">
				<li><a href="#"><span class="english">SpecialChem</span>Ö÷Ò³</a></li>
				<li><a href="#">ËÜÁÏÐÐÒµ</a></li>
				<li><a href="#">½ºÕ³¼ÁÐÐÒµ</a></li>
				<li><a href="#">ÅäÉ«ÖÐÐÄ</a></li>
				<li><a href="#">¹ØÓÚÎÒÃÇ</a></li>
				<li><a href="#"><span class="english">English Version</span></a></li>
			</ul>
	
	</div>


et le bout de CSS qui va avec :

#header {
	width: 750px;
	height: 120px;
	border: 1px solid #a9a9a9;
	background: #fff url(logo.jpg) no-repeat left 0;
	background-color: #c6d426;
	padding: 0;
	margin: 0px auto;
	text-align: right;
	
}

#navlist li {
	display: inline;
	list-style-type: none;
	padding-left: 10px;
	padding-right: 2px;
	font-size: 12px;
	
}
Si quelqu'un a une petite idée de ce qui ne va pas... merci pour le coup de main. Smiley murf
Modifié par effisk (15 Oct 2005 - 17:54)
Mmmm à mon avis ca vient du fait que les listes ont un padding/margin par defaut. Essayes d'initialiser ton menu comme suit:

#navlist ul, #navlist li {
margin: 0; padding:0;
}

Modifié par brunob (15 Oct 2005 - 17:05)
ok j'ai mis
ul, li {
	margin: 0;
	padding: 0;
}
en haut de ma css pour ne plus avoir de pb nulle part. Impecc'

Merci Smiley cligne
En fait, certains navigateurs indentent l'<ul> avec un padding-left: 40px, d'autres utilisent margin-left: 40px;.

La solution est de fixer l'un et de mettre l'autre à zéro.

#navlist {
	padding-left: l'indentation voulue (peut être égale à zéro);
	margin-left: 0;
}

ou

#navlist {
	padding-left: 0;
	margin-left: l'indentation voulue (peut être égale à zéro);
}

Voilà.
Modifié par Stephan (15 Oct 2005 - 18:52)