[RESOLU] Menu avec image réactive: décalage sous IE

Bonjour,

J'ai utilisé pour mon site un menu sur la base d'une image réactive en css avec une seule image. Côté affichage aucun soucis sous Firefox 1.5, Opéra 8.5 ou Netscape 7.0. Par contre sous Internet Explorer 6.0 ( comme par hasard!), si je ne rencontre pas de soucis d'affichage à la base, une fois les menus survolés tout se décale.

Je vous laisse juger par vous même ICI.

En modifiant le code j'arrive à obtenir ce que je veux sous IE mais cette fois c'est sous les autres navigateurs que tout se décale...

Voyez-vous une solution ou faut-il que je mette un commentaire conditionnel pour IE?
Il me semble que ce dernier choix n'est pas très conseillé voir même " vraiment pas top du tout" et ne doit être fait que dans des cas extrêmes. Je ne pense pas appartenir à cette catégorie mais je ne vois vraiment pas comment résoudre ce soucis

Par avance, merci de votre aide...
Modifié par Artno (15 Sep 2006 - 21:18)

Artno a écrit :
Il me semble que ce dernier choix n'est pas très conseillé voir même " vraiment pas top du tout" et ne doit être fait que dans des cas extrêmes.

Tu as vu ça ou ?
Modifié par chmel (15 Sep 2006 - 16:01)

Je me suis basé sur le tuto et donc je ne me suis même pas posé la question ^^

Qu'est ce que ça change que l'image soit sur un plan horizontal ou vertical? C'est effectivement plus simple pour calculer le décalage mais sinon? Ca fonctionne sur 3 navigateurs, un seul me pose problème, c'est le mauvais élève Internet Explorer.

Je ne pense pas qu'adopter un plan horizontal pour créer l'image aurait changé quelque chose. Je me trompe?

FAQ: ICI

Je cite:

a écrit :
Ce genre de "bidouille", est-il nécessaire de le dire, est bien évidemment déconseillé. Il est préférable dans tous les cas, quitte à remanier sa mise en page, d'éviter toutes techniques de contournement.

Bref, à moins de ne pas pouvoir faire autrement, sinon...

Bonsoir,

Il s'agit d'un problème assez commun d'IE avec les listes contenant des liens. Et le problème n'existe pas seulement en :hover. Pour t'en rendre compte tu peux essayer ceci :

.menugauche li {border:1px solid red;}

Une solution simple n'affectant pas les autres navigateurs :

.menugauche li {display:inline;}

Bonsoir et merci de ton aide golog. Ca marche, c'est nickel.

En lisant tes conseils je me suis souvenu d'avoir déjà lu ça quelque part... Je vais me le garder dans un coin.
Je débute en conception de site et à force d'absorber des infos je finis par ne plus rien retenir ><

Encore merci. Je passe en [résolu]

Artno a écrit :
FAQ: ICI

Je cite:

Ce genre de "bidouille", est-il nécessaire de le dire, est bien évidemment déconseillé. Il est préférable dans tous les cas, quitte à remanier sa mise en page, d'éviter toutes techniques de contournement.

Bref, à moins de ne pas pouvoir faire autrement, sinon...
Je tiens à préciser quand même que le lien que tu cites concerne les hacks.
Les commentaires conditionnels sont conseillés et ne sont pas de hacks.
Tu as rencontré un problème de hasLayout
Modifié par chmel (16 Sep 2006 - 01:18)

Merci de ce complément d'info chmel... Quand je disais qu'à force de stocker des infos glanées de tout côté cela devient de la ratatouille dans ma petite tête

Pas évident de faire le tri... Je devrais peut être me faire des 'tites fiches