Discussion :

[frmars]

Bonjour

Je me bats actuellement avec les ul et les li.

J'ai tout mis à zéro. Tout. Aucune marge, aucun padding, aucun outline, aucun list-style etc

Et pourtant, dans cette liste horizontale (voir image), j'ai 1 voire 2 pixels en haut et en bas de mes "li". Et je n'en veux pas. J'ai mis en évidence la marge en mettant un fond bleu sur les 'li'



(La barre horizontale est un ul avec des li en display:inline.)


Tout ça me rend dingue.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div  id="navigation" > 
	<ul class="nav"> 
		<li class="page_item">
		bla bla
                </li>
	</ul>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#navigation {
margin:0;
padding:0;
border:none;
width:100%;
background: #000 
}
 
.nav {
margin:0;
padding:0;}
 
ul.nav, ul.nav * {
border:none;
margin:0;
padding:0;
font-weight:normal;
text-transform:uppercase;
font-size:10px;
}
 
ul.nav li.page_item {
display:inline;
list-style-type:none;
margin:0;
padding:0;
color:#fff;
background:blue;
}
 
ul.nav li {
display:inline;
margin:0;
border:none;
text-align:center;
list-style-type:none;
font-weight:normal;
padding:0 7px 0 7px;
}

[Nesmontou]

Bonjour,

Tu pourrais nous dire sur quels navigateurs (nom, version, OS...) ce phénomène se présente ?

Il me semble que cela se produit sous IE (je ne sais plus quelle version) quand le code HTML est indenté.

Pour le corrigé, il faudrait coller tout le code de la liste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ul class="nav"><li class="page_item">bla bla</li></ul>

C'est un vieux souvenir, je me trompe peut-être

Nesmontou