Discussion :

[Macintoc]

Salut !

IE me pose un soucis assez contrariant au niveau de l'affichage verticale d'une liste dans le cadre d'une arborescence.

Textuellement, quand je déroule un élément B puis que je déroule un élément A, les sous-éléments de B sont décalés d'autant de pixel que la hauteur total des sous-éléments de A.

Concrètement, ça donne ça (testé avec IE 6 et 7). Il y a également une version DOM ici (fonctionne avec Firefox 1.5, 2.0 et Opera 9.1) qui fonctionne sans le moindre problème.

J'espère qu'il ne s'agit pas d'un bug d'IE mais d'une subtilité dans l'implémentation des listes qui m'a échappé

Merci pour votre aide

[Oluha]

quand je teste ton lien sous IE ou FF ca ne fonctionne pas

EDIT : ah non j'avais pas vu qu'il fallait cliquer sur le + vu qu'il y a le soulignement du lient sur element

[Macintoc]

Oui, j'ai choisis une ergonomie plus proche de celle de l'explorateur windows.

Un clique sur l'élément ouvre le contenu de l'élément cliqué.
Un clique sur le + ou - déroule ou enroule l'arborescence.

Par contre, j'ai oublié de préciser quand est-ce que le bug sous IE apparait

Deux cas de figure :
-dérouler l'élément 2
-dérouler l'élément 1
-constater les dégats

-dérouler l'élément 1
-dérouler l'élément 2
-enrouler l'élément 1
-constater les dégats

[Macintoc]

Il n'y a pas de solution ?

[Macintoc]

Un petit up, au cas où ?

[Candygirl]

A première vue je pencherais pour un problème de haslayout.

Essaie d'ajouter un

Code css :

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

* {zoom:1;}

dans ton css voir si, avec le layout partout, ton menu se comporte correctement.

[Macintoc]

Ca marche, merci ^^

Une dernière question, est-ce qu'il y a un script CSS regroupant tout les hacks CSS de ce genre destiné a faire fonctionner IE normalement ?

[Candygirl]

Le * {zoom:1;} est très pratique pour tester et voir si le problème est bien une question de haslayout, mais je ne le laisse jamais comme tel perso.

Je te conseille plutôt de chercher quel(s) élément(s) tu dois doter du layout pour que cela fonctionne . Tu peux commencer par donner un width de 100% partout où c'est possible, comme ici:

Code :

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

1
2
3
4
5
 
ul#menu li{
  position:relative;
  width:100%;
}