Discussion :

[bilibou]

Bonjour,

J'ai un petit probleme avec des ul imbriqués dont le code est le suivant:

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
<ul id="article_list"> 
<li class="page_item page-item-66"><a href="http://www.simplyfly.fr/articles/informatique-et-parapente/" title="Informatique et parapente">Informatique et parapente</a><br>
<ul>
 
	<li class="page_item page-item-69"><img src="/wp-content/uploads/images_articles/dashboard/thumbs/dashboard.jpg"><a href="http://www.simplyfly.fr/articles/informatique-et-parapente/widget-dashboard/" title="Dashboard et le vol libre">Dashboard et le vol libre</a><br>Cet article est réservé aux possesseurs de mac, j’y présente dashboard et des widgets utiles pour le parapente</li>
	<li class="page_item page-item-68"><img src="/wp-content/uploads/images_articles/googleearth/thumbs/googleearth.jpg"><a href="http://www.simplyfly.fr/articles/informatique-et-parapente/utiliser-google-earth-pour-le-vol-libre/" title="Utiliser Google Earth pour le vol libre">Utiliser Google Earth pour le vol libre</a><br>Vous trouverez dans cet article différents fichiers kmz utiles pour le vol libre, ainsi que des utilitaires pour convertir vos traces de vol au format google earth.</li>
</ul>
</li>
<li class="page_item page-item-67"><a href="http://www.simplyfly.fr/articles/materiel/" title="Matériel">Matériel</a><br>
<ul>
	<li class="page_item page-item-70"><img src="/wp-content/uploads/images_articles/checklist/thumbs/checklist.jpg"><a href="http://www.simplyfly.fr/articles/materiel/checklist-v1/" title="Checklist V1">Checklist V1</a><br>Un petit article sur la visite prévol et l’entretien de la voile, de la sellette et du secours. En cadeau il y a une petite fiche semblable à une checklist que vous pourrez imprimer et emmener avec vous sur les décos.</li>
 
</ul>
</li>
 
</ul>

et voici la feuille de style associée:

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
 
 
#article_list {
font-weight: bold;
font-size: 1.2em;
list-style-type: none;
}
 
#article_list ul {
clear: both;
font-weight: normal;
font-size: 0.8em;
line-height: normal;
margin-bottom: 10px;
margin-top: 5px;
list-style-type: none;
}
 
#article_list ul a {
text-decoration: underline;
}
 
#article_list ul li {
clear: both;
margin: 2px;
}
 
#article_list img {
float:left;
width: 50px;
height: 50px;
 
}

Je n'ai pour l'instant testé ce code que sur Safari et sous Firefox mac.

Sous safari j'obtiens l'affichage souhaité:

Sous firefox j'obtiens un affichage différent et qui ne me convient pas:


J'ai du surement m'embrouiller avec les clear:both, mais je n'arrive pas à trouver où.

Merci de votre aide ;-)

[Erwan31]

Bonjour,
c'est un bug assez particulier qui fait qu'une succession de sélecteur d'éléments
(ul li) descendant d'un sélecteur de classe ou d'identifiant (ici #article_list)
empêche la règle d'être appliquée.
Donc ton clear:both n'a aucun effet.

La solution consiste à supprimer le sélecteur de type intermédiaire (ul): #article_list li {}