Ralentissement sous IE, Impeccable sous FF, le menu déroulant...

Bonjour,

Je travaille actuellement sur le design d'un menu, que je souhaite déroulant.

http://www.welcomebac.com/CC/Design/Designv35.html

Le fichier Java se trouve à cette adresse :

http://www.welcomebac.com/CC/Design/java.js

Pour ce faire, et pour des raisons de découpage de ma page, les différents éléments du menu sont tous z-indexés pour passer les uns sous les autres, et je leur attribue avec une fonction initialisation, un margin-top correspondant à la taille du menu, pour qu'en statique, il soit impeccable. Lorsque je clique sur un titre de menu, il fait évoluer le margin-top jusqu'à une valeur définie pour afficher completement l'onglet. Mais le soucis est la compatibilité, sous firefox le menu est parfait, alors que sous IE 7 (n'essayez pas sous IE6, le design est incompatible, ou bien si vous essayez vous allez vous marrer ) sous IE 7 donc, la fonction dérouler rame complètement.

Sauriez vous qu'elle en est la raison ?

Je reste à disposition bien sur pour d'autres questions

Merci

avant d'essayer de faire le JS du menu (JS qui m'a fait peur quand je l'ai ouvert)
il faudrait d'abord revoir le code HTML et CSS de ta page.

Car là ton site, tiens grâce à des bouts de ficelles et le miracle du saint esprit.

Il suffit d'ouvrir ton site sous IE6 (qui représente encore 30% de la population) et ton site ne ressemble à rien. Quand je dis à rien, je pèse encore mes mots à ce moment là

Ton menu devrait etre une liste UL LI A et au pire rajouter un DIV pour englober certains UL.

Déjà rien qu'en faisant cela on peut rendre plus générique le code JS

Autre chose dans ton menu, TOUT est figé en largeur (alors qu'il suffirait de les laisser prendre la largeur du menu) et TOUT est passé en float:left.
Ensuite il y a un jeu horribles de marges negatives et autres petites horreurs du meme genre.

Pour faire un menu comme le tiens. Il faut juste englober les UL (qui contiennent les sous-éléments de nav) dans des DIV en overflow:hidden; (ajouter zoom:1 pour IE6), et ensuite, le UL à l'intérieur est en marge négative pour disparaitre).

C'est en gros le concept. Mais en appliquant cela tu peux à mon avis faire quelque chose de plus propre

Et autre chose, le PNG32 sous IE6 c'est DTC dans règle générale

les "background_left", "middle" et consorts, sont complètement inutiles pour la mise en page de ton site, un simple background sur l'élément principal et je suis prêt à parier que ça passe comme une lettre à la poste.

alors je te remercie bien pour ta réponse et t'apportes mes quelques justifications :

Sous IE 6, je suis au courant que ça ne ressemble à rien, mais d'après les statistiques d'un de mes sites, le pourcentage d'utilisateur de IE 6 en 2007 était de 43%, l'utilisation de IE 6 sur le premier semestre 2008 est de 22% laissant penser une utilisation en fin d'année 2008 proche des 10% voire moins.
Et quand tu dis rien, et que tu pèses tes mots, je suis d'accord

"Ton menu devrait etre une liste UL LI A et au pire rajouter un DIV pour englober certains UL." Je vais essayer de m'y intéresser

Le menu figé en largeur est un choix, je ne souhaite pas avoir un menu de largeur variable car cela handicaperai réellement les petites résolutions :s

Pour ce qui est du jeu horrible des marges négatives et autres petites horreurs du meme genre, ainsi que de l'overflow hidden, le soucis vient de la nature des mes onglets, ils ont un bord arrondi, laissant à leur droite un espace transparent, qui se colorise avec le menu d'en dessous, si je n'utilise pas le marges négatives et que j'utilise un overflow hidden, le menu d'en dessous aura disparu, et je me retrouverai avec un espace transparent à droite de chaque onglet...

L'avantage de ces margin, c'est qu'il retransmettait exactement le phénomène de marque page que l'on tirait :s

Le PNG 32 DTC pour IE 6, je l'ai découvert à mes dépens mais la je te renvoie au premier paragraphe.

et le background left, le middle et le background_right, qui selon toi ne servent à rien, sont la seule solution que j'ai trouvée pour construire un design extensible, en délimitant une zone de contenu au centre extensible.

Je vais donc me pencher sur cette solution de UL LI A, mais j'aimerai autant que tu répondes aussi à mes remarques, pour savoir si je me suis réellement fourvoyé, car oui, ce site tient à des bouts de ficelles mais je pensais avoir bien étudié ces ficelles :s

fetnat a écrit :
alors je te remercie bien pour ta réponse et t'apportes mes quelques justifications :

Sous IE 6, je suis au courant que ça ne ressemble à rien, mais d'après les statistiques d'un de mes sites, le pourcentage d'utilisateur de IE 6 en 2007 était de 43%, l'utilisation de IE 6 sur le premier semestre 2008 est de 22% laissant penser une utilisation en fin d'année 2008 proche des 10% voire moins.
Et quand tu dis rien, et que tu pèses tes mots, je suis d'accord

Ouais mais nan, c'est surtout pas comme ça qu'il faut penser.
Faire un site pour IE6 n'est pas une grande difficulté. Enfin pour moi . J'ai assez l'habitude.
Mais IE6, ne sera pas à 10% en fin d'année, et on risque encore de se le taper un bon moment. 21% des utilisateurs est déjà un chiffre énorme (1 personne sur 5) il ne faut pas les oublier. Au pire tu fais une version un peu plus dégradée pour IE6

fetnat a écrit :

Le menu figé en largeur est un choix, je ne souhaite pas avoir un menu de largeur variable car cela handicaperai réellement les petites résolutions :s

fetnat a écrit :

Je respecte ce choix, mais ce qui me fait peur c'est que TOUS les éléments à l'intérieurs ont des width, alors que par défaut ils prennent la largeur de leur conteneur, et donc cette largeur est inutile, j'ai aussi vu tout un paquet de float:left sur ces élements, et tu peux aussi supprimer ce float:left, puisque le conteneur principal est en float:left.

fetnat a écrit :

Pour ce qui est du jeu horrible des marges négatives et autres petites horreurs du meme genre, ainsi que de l'overflow hidden, le soucis vient de la nature des mes onglets, ils ont un bord arrondi, laissant à leur droite un espace transparent, qui se colorise avec le menu d'en dessous, si je n'utilise pas le marges négatives et que j'utilise un overflow hidden, le menu d'en dessous aura disparu, et je me retrouverai avec un espace transparent à droite de chaque onglet...
L'avantage de ces margin, c'est qu'il retransmettait exactement le phénomène de marque page que l'on tirait :s

Oui là c'est normal que tu en ai besoin, j'ai pas totalement tout analysé, mais

fetnat a écrit :

Le PNG 32 DTC pour IE 6, je l'ai découvert à mes dépens mais la je te renvoie au premier paragraphe.

Bah soient tu passes par un filter, soit tu fais en PNG 8 bits pour IE6

fetnat a écrit :

et le background left, le middle et le background_right, qui selon toi ne servent à rien, sont la seule solution que j'ai trouvée pour construire un design extensible, en délimitant une zone de contenu au centre extensible.

A mon avis il y aurai moyen de gerer, quoi que....... étant donné que ton site doit toujours prendre la hauteur du navigateur, cela risque d'être assez chaud à gérer autrement

fetnat a écrit :

Je vais donc me pencher sur cette solution de UL LI A, mais j'aimerai autant que tu répondes aussi à mes remarques, pour savoir si je me suis réellement fourvoyé, car oui, ce site tient à des bouts de ficelles mais je pensais avoir bien étudié ces ficelles :s

Oui penche toi dessus