Comportement IE6 sur liste de sélecteurs [Bug contourné]

Bonjour,

J'ai un casse-tête étrange ces jours-ci...
Alors, j'ai un menu déroulant en CSS, le hover est émulé avec un tout petit peu de Javascript pour IE6. C'est celui de Pompage.

Je souhaite que l'item correspondant à la page en cours ait la même tête que quand il est survolé. Pour cela j'ai fait ce qui me paraissait logique :

<ul id="menu1">
  <li class="off" id="item1">Item 1</li>
  <li class="on" id="item2">Item 2</li>
</ul>

Avec en CSS :

ul#menu1 li#item2.on, ul#menu1 li#item2.sfhover, ul#menu1 li#item2:hover { background-image: url(toto.gif); }

(ce n'est pas la même image pour item1, mais j'ai le même genre de ligne dans la CSS bien entendu)

Et voilà le souci : tout est OK bien sûr avec Firefox (pas testé avec un autre navigateur moderne, mais ça devrait passer)
En revanche, IE6 ne s'en sort pas : il ne prend en compte que ul#menu1 li#item2.sfhover dans la CSS. Si j'inverse ul#menu1 li#item2.sfhover et ul#menu1 li#item2.on, alors il ne prend en compte que ul#menu1 li#item2.on.

J'avoue que je ne comprends pas où est mon erreur (s'il y a) ni pourquoi IE bloque là dessus alors que ça me parait être assez basique

Modifié par Asumbaa (28 Nov 2006 - 13:43)

Bonjour,

Je laisse l'explication précise aux spécialistes, mais j'ai eu moi aussi des comportements incohérents avec IE 6 concernant la syntaxe "nomEl#nomId.nomClasse". Je crois qu'elle est malheureusement à éviter.

Oui c'est un bug spécifique à IE6 :

lorsqu'une déclaration CSS est écrite comme ceci :

#identifiant.classe1{}
#identifiant.classe2{}

Le deuxième sélecteur est ignoré par IE

Voir chez Quirksmode pour plus de détails.

En attendant la solution la plus simple consiste à ne pas préciser l'identifiant si c'est possible.

Salut et merci,

Eldebaran a écrit :
Bonjour,

Je laisse l'explication précise aux spécialistes, mais j'ai eu moi aussi des comportements incohérents avec IE 6 concernant la syntaxe "nomEl#nomId.nomClasse". Je crois qu'elle est malheureusement à éviter.

Argh... Et je peux même pas jouer avec les enfants/frères pour contourner ça
Je crois que je vais dire que c'est normal que l'item courant ne soit pas distingué des autres

Sauf si quelqu'un a une idée ?


Edit : avais pas vu la seconde réponse,
Malheureusement je ne peux pas faire sans l'id, mes différents items ayant des images de fond différentes

Edit 2 : ah, mais merci pour le lien ! J'ai déporté mon .sfhover dans une CSS à part (je voulais de toute façon mettre ensemble à part tous ces ajouts spécifiques IE) et ça fonctionne à présent. Super, merci
Modifié par Asumbaa (28 Nov 2006 - 13:43)

Pourquoi n'utilises-tu pas une classe différente plutôt qu'un id pour chaque item ?

Encore moi,

Eldebaran a écrit :
Pourquoi n'utilises-tu pas une classe différente plutôt qu'un id pour chaque item ?

Ahh... Avec cette technique, comme je fais pour repérer un élément sur lequel sont appliquées plusieurs classes ?

Element.classe1.classe2 me fait ça ? (je n'utilise pas souvent les classes multiples sur mes éléments)

Asumbaa a écrit :
Element.classe1.classe2 me fait ça ? (je n'utilise pas souvent les classes multiples sur mes éléments)

La syntaxe est en effet celle-là, mais je ne sais pas si IE la supporte bien en fait.

Idem, IE ne gère pas la syntaxe Element.classe1.classe2, il va considérer ce sélecteur comme équivalent à Element.classe2 (il ne prend en compte que la dernière classe)

et c'est bien dommage

Merci pour toutes ces infos, on en apprend tous les jours c'est chouette
J'ai quand même réussi avec la séparation en deux fichiers, donc pour ce problème spécifique c'est bon, et je me souviendrai des limitations pour le futur.

Encore merci !