Listes imbriquées, bug ie7

[Mo_Poly]

Bonjour,

Je ne sais pas si ce sujet devrait être ici ou dans un forum CSS, à vous de voir.

J'ai des listes imbriquées, du genre :

Code :

1
2
3
4
5
6
7
8
 
<ul>
<li>aaa
   <ul><li>aaabbb</li></ul>
</li>
<li>bbb</li>
<li>ccc</li>
</ul>

etc.
Dans chaque li, il y a un lien, avec une icône +. Par défaut tous les li du premier niveau sont affichés, ceux des autres niveaux sont cachés. Quand je clique sur un li, j'ouvre ses sous-éléments directs, et le + devient -, si je reclique sur le même élément, je cach ses sous-éléments directs, et le - devient +. Je fais ca donc avec tous les li.
Ça fonctionne très bien sur chrome, firefox etc. Mais bien évidemment, sur ie7 cela ne fonctionne pas.
En fait, au début le problème était que sur ie7, pour tous les li cachés, il affichait un espace blanc, et étant donné que j'ai plusieurs li sur plusieurs niveaux, j'avais beaucoup d'espaces vides dans la page.

J'ai ajouté du style sur ie7, j'ai ajouté exactement un line-height:0px; et font-size:0px;

Bien évidemment là, la fonction show() de jquery ne fonctionnait plus, alors j'ai ajouté avec le show des

Code :

1
2
.css('line-height','18px'); 
.css('font-size','12px');

(sur les bons éléments bien évidemment).
Mais ce que cela m'a donné, c'est que quand je clique sur un élément pour afficher ses sous-éléments direct, ils s'affichent, mais le div qui contient le tout (qui a des bordures) ne s'ajuste pas. Dans le fond, les li s'affichent et dépassent la bordure d'en bas. et si j'ai un autre li en bas de celui sur lequel j'ai cliqué, le texte qui s'affiche va aller sur l'autre texte. Donc le height ne s'ajuste pas.

Avez vous une idée sur comment régler cela ?

Merci!


...

[gwinyam]

C'est plutôt du CSS pour moi mais je pense que la solution est la suivante : réduire le top-padding ou le margin-top. Je ne sais plus laquelle des deux propriétés décale toute liste HTML vers le bas.