Hello,
 
j'essaie de me mettre doucement au XHTML/CSS et j'avoue que les debuts sont laborieux... J'ai recupere chez Eric Meyer un bout de CSS pour faire du CSS dropdown menus que j'ai essaye d'arranger a ma sauce pour obtenir ce que j'avais en tete. J'ai une version qui marche a peu pres sous Firefox et deja moins bien sous IE. Pour le voir en action: http://www.nabocorp.com/test/index.html
 
Les bugs identifies:
- Firefox/IE: quand le curseur est sur la derniere entree d'un menu on a une double ligne noire
- IE: dans un dropdown, pourquoi le <ul> est plus large que les <li> (voire bordure)
- IE: pourquoi ma bordure gauche noire s'arrete 1 pixel autour des sections?
 
Ca fait pas mal de temps que je me casse la tete et je ne trouve pas. Si quelqu'un a une idee ca serait sympa!!
 
Merci
mynab

En dehors des problème de compatibilité que j'ai pas encore eu le temps de regarder cette méthode a un inconvénient sous IE c'est le chargement des images. Sous IE il les recharges systématiquement ce qui est assez désagréable ... essaye de regarder du côté des déplacement d'image de fond pour tes éffets rollover...
Enfin bref je jette un coup d'oeil sur tes bugs ;o)

Pour ta première question c'est pas une double ligne noir mais comme tu as une bordure en bas pour le ul elles s'aditionnent. Il faudrait donner la class dernier à tes lien ou li et ne pas mettre de border-bottom pour ceux là ...

Pour le probleme de la ligne noire j'avais pense a cette solution mais je voulais eviter: ne serait-il pas possible de diminuer la taille verticale du <ul> de 1px pour que les deux lignes se confondent? Sinon je passerai par la methode du dernier pour eviter cela.
 
Pour le probleme dur rollover tu parles du leger effet de flicker que l'on voit quand on deplace le curseur au dessus des choix du menu?
 
Merci. J'attends la suite

pour la ligne noir je ne crois pas que ça résolve ton pb de diminuer le ul qui est un block et qui sera donc englobant pour ton li. J'aurais pu t'aiguiller vers un border-collapse mais IE s'en moque donc ... pas trop le choix je pense. Mais je me trompe peut être.
 
Pour le rollover c'est exactement ça
un article là dessus .. par contre lis bien les limitations pour être sur que ça te convienne.
http://www.pompage.net/pompe/sprites/
 
Pour les autres je peux pas trop tester en local donc c'est plus chiant pour tester ...

Bon OK j'ai un peu progresse...
 
J'ai resolu le probleme de la double ligne avec un last. Seul truc que j'ai pas compris c'est que si je mettais class="last" sur le dernier item IE mettait tous les items de la list en class last. J'ai mis id="last" et ai transforme li.last en li#last dans ma definition CSS mais bon du coup j'ai plusieurs elements avec id="last" dans mon document ce qui me derange conceptuellement mais n'a l'air de deranger ni Firefox ni IE!
 
Pour ce qui est du <ul> plus large que le <li> sous IE je l'ai resolu avec un "margin-right: 2px" qui n'a pas l'air d'affecter Firefox mais corrige le bug sous IE.
 
Le probleme du border-bottom qui recouvre mes border-left et border-right n'est pas encore resolu...
 
mynab

Pour le coup des id c'est vraiment pas une bonne solution. Tu ne dois pas avoir plusieurs éléments avec le même id. Réessaye avec les classes mais en choisissant bien le pointage en css ça devrait fonctionner.
Sinon pour les borders essaye d'être explicite avec IE en mettant tous les bord à none et ensuite le bottom à 1px... il aime bien mettre des bord vide sinon

Ca y'est j'ai resolu le probleme des bordures. J'ai laisse le <ul> dessiner son cadre noir et les <li> sont mises proprement strictement a l'interieur du <ul> et donc n'ont qu'a dessine leur border-bottom...
 
Pour les id a la place des class je regarde...
 
Le dernier bug est que sous IE le popup est un pixel trop haut. Faut que j'arrive a le descendre dans IE sans le descendre dans Firefox

Bon ca y'est j'ai resolu tous mes problemes plus ou moins elegament:
http://www.nabocorp.com/test/index.php
 
Pour les id a la place de class ca venait d'un mauvais parsing de la stylesheet fait dans csshover.htc (la behavior qui permet d'activer le hover sur n'importe quel item dans IE). Je vais ecrire a l'auteur pour lui signaler.
 
Pour le decalage de 1px comme j'en avais marre de bosser dessus sans trouver de solution et que de toutes manieres je passe par du php, je detecte le browser en php et je surcharge specifiquement pour IE un des styles. Dynamiquement je rajoute donc
 
div#nav ul ul { margin: 1px 0 0 -1px; }
 
dans le .html sachant que dans le CSS j'ai:
 
div#nav ul ul { margin: 0 0 0 -1px; }
 
OK c'est pas tres beau mais ca marche a moindre frais :-)
 
mynab
 

La détection de browser c'est sans doute la façon la plus "sale" de corrigé le problème ... il existe au pire pas mal de hack CSS et des commentaire CSS spécial IE qui te permettrait de faire ça plus proprement ... imagine que tu fasse une mise à jour de ton menu .. ça impact le css et le php ça devient assez galère a gerer.