Forum d'entraide PHPFrance

Bonjour,

j'utilise la balise ul pour un menu, et je n'arrive pas à supprimer le décalage que crée cette balise sous Firefox (il n'apparait pas sous IE).

Comment puis-je faire ?

Le problème en visuel : http://www.wir3d.net/bordel/prototype01/index.php

HTML :

Code : Tout sélectionner

<div id="main">

	<div id="kwick">
		<ul class="kwicks">
		<li><a class="kwick download" href="#"><span>Menu #1</span></a></li>
		<li><a class="kwick documentation" href="#"><span>Menu #2</span></a></li>
		<li><a class="kwick forum" href="#"><span>Menu #3</span></a></li>
		<li><a class="kwick trac" href="#"><span>Menu #4</span></a></li>
		</ul>
	</div>
	
	
</div>

et le CSS :

Code : Tout sélectionner

#main {
position:fixed !important;
position:absolute;
left:50%;
margin-left:-490px;
width:980px;

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
/* BANNIERE */
#banniere {
position:absolute;
left:0px;
top:10px;
width:968px;
height:143px;
}
#banniere .top {
position:absolute;
left:0px;
top:0px;
width:968px;
height:8px;
background:url(img/banniere_top.gif) no-repeat;
}
#banniere .bg {
position:relative;
left:0px;
top:8px;
width:966px;
height:135px;
border:1px solid #92E36B;
border-top: 0px;
background:url(img/banniere_bg.jpg) no-repeat;
}
/* BANNIERE END */

/* ACCORDION */
#kwick {
	position: absolute;
	left:0px;
	top:200px;
	border:1px solid black;
}
#kwick ul {
margin:0px;
}
#kwick li {
	/* float:left; */
	list-style-type:none;
	margin-bottom:3px;
}
#kwick .kwick {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 125px;
	width: 125px;
	padding: 10px;
}

#kwick .kwick span {
	display: none;
}

#kwick .download {
	/* background-image:url(img/download.gif); */
	background-color:#00CC66;
}

#kwick .documentation {
	/* background-image:url(img/docs.gif); */
	background-color:#990033;
}

#kwick .forum {
	/* background-image:url(img/forum.gif); */
	background-color:#0099FF;
}

#kwick .trac {
	/* background-image:url(img/trac.gif); */
	background-color:#FF9900;
}
/* ACCORDION */

Ajoute un

Code : Tout sélectionner

list-style-position: inside;

ça ne marche pas. j'ai essayé de le mettre dans n'importe lequel de mes styles, aucun effet.

Mets les avec la regle css qui régit ton ul et normalement, ca doit fonctionner

deja essayé, pas de changements : /

Code : Tout sélectionner
<div id="main"> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick download" href="#"><span>Menu #1</span></a></li> <li><a class="kwick documentation" href="#"><span>Menu #2</span></a></li> <li><a class="kwick forum" href="#"><span>Menu #3</span></a></li> <li><a class="kwick trac" href="#"><span>Menu #4</span></a></li> </ul> </div> </div>

À ta place, je ferais plus simple pour le code HTML.

Code : Tout sélectionner

<div id="main">
		<ul class="kwicks">
		<li><a class="kwick download" href="#"><span>Menu #1</span></a></li>
		<li><a class="kwick documentation" href="#"><span>Menu #2</span></a></li>
		<li><a class="kwick forum" href="#"><span>Menu #3</span></a></li>
		<li><a class="kwick trac" href="#"><span>Menu #4</span></a></li>
		</ul>
</div>

Pour le reste, il me semble que tu n'as pas défini les marges latérales, ainsi que la marge haute de l'élément li.

Résolu. Il suffisait de rajouter un padding:0px dans le style du <ul> : )

Forum d'entraide PHPFrance

<ul> : problème de décalage sous Firefox

<ul> : problème de décalage sous Firefox

Re: <ul> : problème de décalage sous Firefox