[Résolu] IE7 et pseudo-classe :hover avec menu suckerfish

Bonjour,

Il semblerait qu'IE7 pète un plomb avec la pseudo-classe :hover.

J'ai pompé le menu déroulant suckerfish sur pompage, et j'ai un problème. Tout vas bien jusqu'à ce qu'on clique, n'importe où dans la page (de préférence pas sur un lien évidement). A partir de ce moment le menu ne se referme plus. Il s'ouvre au survol et reste ouvert. Vous pouvez faire le test sur cette page.

C'est déjà lourd pour un menu horizontal, mais en plus le mien est vertical alors je vous dis pas le résultat...

A part le javascript, savez-vous s'il existe une solution ? En css ça serait bien mais je sèche...

Merci !

PS : pensez-vous qu'il soit concevable de monter une opération mondiale pour que sur tous les sites du web si l'internaute se ramène avec IE, il reçoit un message du type "Votre navigateur est une sous-bouse. Pour vous et par respect pour le travail du webmaster, veuillez utiliser un navigateur valide" ?
Modifié par Andong (17 Jun 2007 - 15:01)

Salut,

Ce problème est dû au script de suckerfish et non à IE. Ce navigateur a ses propres règles, certes, mais c'est loin d'être une "sous-bouse"... Il suit un modèle différent et d'autres navigateurs s'avèrent bien plus problèmatiques.

Cela dit, le mieux serait de ne pas faire de menu déroulant parce que ça, oui, c'est souvent un défaut de conception. Et si vraiment tu ne vois pas comment t'en passer (as-tu pensé au plan du site ?), alors mieux vaut se rencarder sur des solutions de ce type (déjà plus accessible)

a écrit :
A part le javascript, savez-vous s'il existe une solution ? En css ça serait bien mais je sèche...

CSS n'est pas fait pour gérer le comportement de la page ; ça devrait être laissé au JS.

Bon, déjà pour ceux qui auraient le problème, je mets la solution avec js, mais ça ne me plait qu'à moitié... J'attends vos réponses !

Donc, avec javascript :
rajouter la règle css suivante

#nav li.retour ul {
left:-999em;
}

et changer la fonction sfHover comme suit :

sfEls[i].onmouseover=function() {
	this.className+=" sfhover";
}

devient :

sfEls[i].onmouseover=function() {
	this.className=this.className.replace(new RegExp(" retour\\b"), "");
	this.className+=" sfhover";
}

et

sfEls[i].onmouseout=function() {
	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}

devient

sfEls[i].onmouseout=function() {
	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	this.className+=" retour";
}

Edit : balises de code[/i][/i][/i][/i]
Modifié par Andong (17 Jun 2007 - 14:34)

a écrit :
En fait mon menu déroulant n'est pas indispensable, c'est juste une fonctionnalité en plus.

Tu ferais mieux de t'en passer car les contraintes d'un menu déroulant sont énormes... En procédant ainsi, tu brides voire tu rends ton menu inaccessible pour ceux qui naviguent au clavier, ceux qui ont besoin de désactiver les couleurs, ceux qui souffrent de problèmes psychomoteurs, etc... etc...

PS : Peux-tu éditer ton message précédent pour mettre ton code entre [code ] et [ /code] (sans les espaces) comme prévu dans les règles ? Merci d'avance.

Andong a écrit :
"Votre navigateur est une sous-bouse. Pour vous et par respect pour le travail du webmaster, veuillez utiliser un navigateur valide"

Ou encore : « À cause de l'incapacité du concepteur de ce site à gérer d'une part ses émotions et d'autre part la compatibilité avec un navigateur somme toute peu problématique, nous vous imposons un message déplacé et dont vous n'aurez probablement rien à faire. »

Je force un peu le trait, mais c'est pour donner un contrepoint.

De plus, à certains égards de nombreux navigateurs pourraient s'attirer les foudres des développeurs et webdesigners : Firefox pour non-implémentation de display: inline-block, gestion poussive des images de fond fixe, bugs divers... Safari pour son implémentation pas terrible de Javascript et ses formulaires non stylables. Opera pour telle ou telle autre raison (là j'avoue que je n'en ai pas en tête, mais je suis sûr qu'il y en a).

Pas de raison de montrer du doigt un navigateur plutôt qu'un autre, sauf sans doute IE6 qui, très ancien, cumule de nombreux défauts. Dans ce cas, le mieux que l'on ait à faire est d'inciter les visiteurs à utiliser une version à jour de leur navigateur (donc IE7 plutôt que IE6... quand c'est possible, car tout le monde n'a pas Windows XP SP2...).

Oui, j'avais déjà lu cet article, et je suis d'ailleurs tout à fait d'accord. Comme je l'ai dit, mon menu déroulant n'est pas indispensable. C'est juste un outil pratique pour ceux, nombreux, qui le trouvent bien pratique.

Même s'il faut penser à l'accessibilité, il ne faut pas non plus oublier les habitudes de navigation de la majorité

Concernant IE7, j'avoue ne pas bien le connaître (et non, je ne suis pas webmaster de profession...). J'ai juste été, disons surpris, en constatant que pas mal de bugs d'IE6 n'avaient pas été réglés dans IE7, mais que mon hack préféré (!important) avait lui été réglé, et donc plus utilisable... Ceci dit, à part ce menu déroulant, je n'ai pas constaté de bug d'affichage dans IE7 sur le site que j'ai codé sans même y penser, donc il doit y avoir du progrès

Et, au fait, pour un site marchand, impossible d'inviter l'internaute à updater son navigateur. Il faut que ça soit nickel pour tout le monde, pas le choix...

Andong a écrit :
[... ]

Même s'il faut penser à l'accessibilité, il ne faut pas non plus oublier les habitudes de navigation de la majorité

[... ]

Tiens quelqu'un qui les connait ?

Il faudrait nous les donner çà nous serait très utile.

Plus sérieusement je cotoie tout les jours des dizaines de personnes très variées utilisant internet, et je suis bien incapable de définir une habitude de navigation majoritaire, tout particulièrement face à un menu déroulant dont beaucoup ignorent tout simplement leur existence dans une page . Au delà d'une question d'accessibilité c'est surtout une question d'ergonomie et de compréhension du fonctionnement global d'une page. Préssupposer que le visiteur saisira d'emblée un fonctionnement complexe est il me semble une erreur.

Andong a écrit :
J'ai juste été, disons surpris, en constatant que pas mal de bugs d'IE6 n'avaient pas été réglés dans IE7, mais que mon hack préféré (!important) avait lui été réglé, et donc plus utilisable...

Ben là le principal problème ce ne sont pas les bugs non corrigés (je trouve pour ma part qu'il y en a au contraire beaucoup qui ont été corrigés), mais plutôt le fait que tu utilises des hacks CSS (pas fiables, notamment suite à un changement de version...) au lieu d'utiliser les commentaires conditionnels (fiables).

Pour les commentaires conditionnels, voir la FAQ du forum.

Andong a écrit :
Et, au fait, pour un site marchand, impossible d'inviter l'internaute à updater son navigateur. Il faut que ça soit nickel pour tout le monde, pas le choix...

Pas d'accord. Il est tout à fait possible de pratiquer une forme raisonnable de dégradation gracieuse : les utilisateurs d'IE6 auront alors un site tout à fait accessible et utilisable même si pas « optimal », et les navigateurs plus récent afficheront la version « optimale ». Le but étant que les utilisateurs de la version dégradée n'aient pas l'impression qu'il y a quelque chose qui ne va pas, mais qu'ils puissent avoir mieux s'ils mettent à jour leur navigateur (ou changent de machine pour une plus récente...).

Ensuite, il est toujours possible d'inciter les visiteurs à utiliser une version plus récente de leur navigateur dans une page d'information périphérique au site (par exemple dans la FAQ...). En présentant bien sûr les choses sous le bon angle.

Et oui, je sais que je devrais utiliser les commentaires conditionnels, mais les hack css c'est plus pratique, alors on n'y pense pas jusqu'à ce qu'il arrive un pépin... maintenant je sais.