Problème liste non-ordonné interligne IE

**Addict`** · 13/02/2009, 11h03

Bonjour,

Le titre est assez claire. J'ai une liste non ordonnée avec à la place des puces, une image. Dans Mozilla, tout est nikel mais dans IE, l'interligne est trop grand et je n'arrive pas a le corriger...

Le site est en ligne : Site

Ceci est dans la Sidebar de gauche, au niveau des 2 puces du bas.

Le code CSS :

Code css :

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
40
41
42
43
44
45
46
47
48
49
50
51
#sidebar1 {
	width:150px;
	height:389px;
	float:left;
	background-image:url(../img/interface/side.png);
	font-size:12px;
	text-align:center;
	margin-top:20px;
 
}
#sidebar1 form {
	font-size:90%;
	text-align:center;
}
#sidebar1 input {
	width:70%;
}
#sidebar1 h3 {
	width:130px;
	height:20px;
	line-height:18px;
	background-image:url(../img/interface/fd_blue.png);
	color:white;
	text-decoration:none;
	font-size:13px;
	margin-top:25px;
	margin-left:10px;
	margin-right:10px;
	text-align:center;
}
#sidebar1 a {
	display:block;
	text-decoration:none;
	color:black;
}
#sidebar1 li a:hover {
	color:black;
	text-decoration:none;
	background-color:#FF9900;
}
#sidebar1 li {
	color:#000;
	width:60px;
	text-decoration:none;
	list-style-image:url(../img/interface/flech.png);
	margin-left:30px;
}
#sidebar1 ul { 
	margin-left:0px; 
	padding:0px; 
}

Merci de votre aide.

**HiRoN** · 13/02/2009, 11h24

Salut,

Tu pourrais voir en faisant un hack CSS pour IE et en jouant sur des marges négatives (un exemple assez proche ici (mais qui était dans le cadre d'un menu) qui devrait te donner une piste de réflexion)

**Addict`** · 13/02/2009, 11h27

Hack CSS, c'est valide W3C ?

**HiRoN** · 13/02/2009, 11h30

Envoyé par Addict`

Hack CSS, c'est valide W3C ?

Oui... Et s'est assez courant pour rendre un site compatible sur tous navigateurs (généralement utile pour IE6).

**Addict`** · 13/02/2009, 11h31

Ok, merci de ton aide mais mes puce ne s'alignent plus avec mon texte... comment je peux faire pour corriger cela?

Merci de ton aide HiRoN

**Macmillenium** · 13/02/2009, 11h56

Bonjour,

Tu as des balises <p> qui trainent partout dans ton code.
Il faut savoir que les feuilles de styles par défaut qui différent d'un navigateur à l'autre appliquent des marges (encore différentes selon les navigateurs) sur cette balise, d'où la différence que tu as entre FF et IE.
Commence par les enlever.

Ensuite dans la css il faut un reset totale pour ton ul et non seulement pour margin-left, tu as aussi un text-align:center quelque part.
A corriger :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#sidebar1 ul { 
	margin:0; 
	padding:0; 
	text-align:left;
}
 
#sidebar1 li {
	color:#000;
	width:60px;
	text-decoration:none;
	list-style-image:url(../img/interface/flech.png);
	margin-left:30px;
}

Envoyé par HiRoN

Tu pourrais voir en faisant un hack CSS pour IE et en jouant sur des marges négatives (un exemple assez proche ici (mais qui était dans le cadre d'un menu) qui devrait te donner une piste de réflexion)

C'est plus correcte de parler des commentaires conditionnelles non ?