Discussion :

[zeflex]

Bonjour,

Je rencontre un petit soucis sur la mise en forme ul li sur ie 7.

Voici le problème rencontré en image :



Les textes sont floutés volontairement.

Je souhaiterai avoir le rendu de firefox sur ie7 mais j'ai pas trouvé la soluce après plusieurs essais.

Le code dans la page est celui ci :

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
 
<div class="middle_cadre_menu">
	<ul>
 
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
 
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
 
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyzn</a></li>
	<li><hr/></li>
	<li><a href="/soirees/xyz.html">xyz</a></li>
 
	<li><hr/></li>
</ul>
</div>

Le code css est celui ci :

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
 
hr {
	height: 1px;
	border: none;
	border-bottom: 1px dotted #c5e0ff;
}
 
 
.middle_cadre_menu li,.fiche_membre li {
	margin: 0;
	width: 90%;
	padding-left: 5px;
	list-style-image: none;
	list-style-type: none;
}
 
.middle_cadre_menu ul,.fiche_membre ul {
	margin-top: 5px;
	text-align: left;
	line-height: 18px;
	list-style-type: none;
}
 
.middle_cadre_menu li:hover {
	background: #d0e6ff;
}
 
.middle_cadre_menu li:first-letter,.fiche_membre li:first-letter  {
	font-weight: bold;
	font-size: 12px;
	color: #666;
}
 
.middle_cadre_menu hr,.fiche_membre hr {
	width: 100%;
	margin: 0px;
	margin-left: 0px;
	height: 1px;
}

Donc ce qu'il se passe, c'est que pour IE7 , je n'arrives pas à réduire la taille du li qui contient un hr ...

Merci de votre aide !

[CCyrillus]

bonjour

Pour IE 7 ,
li est un element de type block et affiche une hauteur d'un em par defaut , même vide.

hr occupe lui aussi 1em d'espace en hauteur , et pour le caler sur 1 px de hauteur , tu devrais lui appliquer un margin:0 -7px ; ... le hr dans IE est une balise difficile a styler ... et qui ne devrais pas . autant user d'une balise neutre de type div ou span pour un effet graphique.

... hr n'est pas justifié et inadapté a l'usage que tu veut en faire.

Tu peux , par exemple deplacer ta mise en forme de hr et li:hover sur li et a en enlevant le <li><hr/></li> de ton code.

Code :

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

1
2
3
li {border-bottom:dotted}
a {display:block;}
a:hover {background: #d0e6ff;}

GC

[zeflex]

Salut,

J'ai également pensé à faire la bordure en bas du li mais cette bordure aurait la même longueur que le li en lui même et dans mon contexte ce n'est pas le cas.

Je vais faire des essais demain, je te tiens au courant demain.

Merci.

[zeflex]

Apres plusieurs essais sans succès, j'ai finalement essayé ta méthode en appliquant le border sur le li directement ...

Ca marche en effet (et comme je le souhaitais niveau graphiquement).

Merci.