[Résolu] Problème de clignotement hover sous IE

Bonjour à tous,

J'espère être dans le bon topique sinon je vais me faire engueuler

Dans le cadre d'un développement de site professionnel avec gestion de contenu, je dois faire un menu qui varie de taille selon le contenu. Le tout aux standards bien sur et sans rajouter d'éléments div inutiles ! Mon problème, c'est que j'ai réussi à obtenir le résultat que je voulais mais sous IE (Grrrrrrr) lorsque je passe la souris sur le lien, ça clignote ! Je doute que le client accepte ça même si je lui explique que IE est ..... Enfin bref ! Si quelqu'un sait comment éviter ce maudit clignotement ?

Merci d'avance et un grand bravo à tous ceux qui font avancer le Web avec des forums comme celui-ci !!!

Ma page exemple -> http://www.soeiro.org/Test/MenuSimple.htm

EDIT: Dites moi au moin si j'ai fais une bétise en écrivant dans ce topic car je trouve ça étrange d'être le seul a avoir 0 réponses dans un forum avec autant de forces mentales, sniff ! Ou dites moi tout simplement si c'est pas possible, merci d'avance !
Modifié par davids (24 Aug 2005 - 19:12)

Ne serait-ce pas un pb de cache de ton navigateur?
Julien

Tu veux dire que ça le fait pas chez toi ?

Moi, quand je passe sur la plupart des images utilisées en fond (background-image... CSS appliqué sur l'élément lien A) ça fait un léger clignotement au moment de survoler et de sortir de la zone !

J'ai la version 6.0.2900.2180...... d'IE donc récente !

En tous cas merci de m'avoir répondu, je commençais à me sentir seul

En revanche, je veux bien savoir si je suis le seul chez qui ça fait ça ou si quelqu'un d'autre connais se problème ? Merci

Bonjour,

Pourquoi des <span> dans tes listes ?
Et des display:block; partout ?

Les balises ul sont des balises block déjà !


Ci-joint le code de mon menu, je te laisse le soin de l'adapter :

/*Je n'ai pas de div, je nomme directement ul et je détermine son style :*/

ul#menu {
	width:99%;
	height:2em;
	margin: 0 auto;
	padding:0;
	font-size:1.1em;
	background: #a82122;
	border-top: 1px solid #eee;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
}

/* Ensuite tu fais un float:left sur les li pour qu'elles soient à l'horizontale */

ul#menu li {
	float:left;
	height:2em;
	line-height:2em;
	margin:0;
	text-align:center;
	list-style: none;	
	border-right: 1px solid #fff;
}

/* Et là, le display block, si tu veux changer de couleur sur tout le pavé ou au survol*/

ul#menu li a {
	display:block;
	padding:0 1em;
	text-decoration: none;
	color:#eee;
	font-weight:bold;
}

/*Ce que je fais là, pour le survol : */
 
ul#menu li a:hover {
	padding:0 1em;
	background: #496d90;
	text-decoration:none;
}

Résultat là

Pour avoir des couleurs différentes, tu peux garder tes class sur les li ...

Il y a de très bons tutoriels sur le site, afin de comprendre pourquoi on fait les choses ... Tu ne perdras pas ton temps si tu t'y attardes un petit peu ...

http://css.alsacreations.com/Construction-de-menus-en-CSS/
Modifié par Vero (24 Aug 2005 - 01:50)

Bonjour Vero,

En fait, les Span dans les éléments A me permettent de définir 3 niveaux de fonds (LI / A / Span) sinon je ne pourrais pas définir trois éléments de fond différents. Je m'explique: J'ai besoin de mettre une image de fond avec un coin à gauche, une à droite et une qui se répète sur le fond (pas encore sur mais je prévois le coup) donc 3 éléments (-; Un peu comme avant avec les tableaux en trois colonnes qui s'adaptaient au contenu avec un coin à gauche et à droite en image + un fond repeat sur la colonne du contenu (nostalgie)

Oui, Ul est un block mais comme j'essai de trouver des solutions à un problème précis sous IE (on connais tous sa façon d'interpréter les CSS) j'ai redéfinis en block mais je ne pense pas que ce soit cela qui pose mon problème, ça aurait été trop simple pour être vrai. En fait, quand j'aurais trouvé la solution à mon problème de clignotement, j'optimiserai le code pour obtenir quelque chose de plus propre car là il y a bien sur des éléments en trop qui me permettent d'être sûr de ne pas avoir à faire à une mauvaise interprétation d'IE.

Merci pour ton aide Vero, je viens de regarder les éléments que tu m'as fourni mais les menus proposés n'ont malheureusement pas la même problématique que moi. à savoir: contenir 3 images de fond (gauche, centre, droite) et surtout, ne pas clignoter sous IE (hover) Pour ce qui es des excellents tutoriaux de ce site, j'y ai appris énormément (merci Raph) mais il n'y a malheureusement pas d'explication pour un cas comme le mien, ce qui est d'ailleurs logique puisqu'il s'agit d'un cas spécifique à une problématique dynamique.

Là, dans ce cas précis, j'essai de trouver une solution pour que les images de fond ne clignote plus sous IE car en fait, mon menu passe très bien sur les autres navigateurs (ceux aux standards) sauf IE, grrrrrrr !!!!

Encore merci à ceux qui essai de m'aporter leur expérience pour me débloquer

j'ai aussi eu le meme problème sur ce site : http://www.beaujolaisdurand.com

Et la solution n'est pas d'utiliser 6 images comme tu le fais mais seulement 2 :|

Rapidement : tu as deux images, une à gauche et une à droite, tu auras une image trés longue (genre 500px) et l'autre seulement le necessaire. Tu met l'image trés longue en background du li et tu met l'autre image en background sur le a.

Ensuite tes images sont un peu spécial, si tes onglets font 40px de haut ton image fera 80px de haut, les 40premiers seront pour l'etat normal et l'autre pour l'etat survoler, aprés tu changes juste le background-position pour monter ou descendre de 40px

j'espere que ceci t'aidera à résoudre le problème !

voila pour les explications détaillé : http://www.pompage.net/pompe/portescoulissantes2/

Merci CyrilCS,

Ton exemple est en effet ce que je cherchais !!!
Il est clair que la façon de faire que tu cites est excelente et très intelligente.

PS: J'utilise seulement 2 images

Grâce à toi, je viens de trouver une superbe explication au problème IE et j'en profites pour m'excuser auprès de la personne qui m'avais demandé si c'était pas un problème de cache (ouiffi) car il avait raison :

Extrait de http://www.pompage.net/pompe/portescoulissantes2/

Clignotement d'IE : Si vous remarquez un clignotement des images en survolant les onglets dans IE/Win, vérifiez les réglages du cache pour les fichiers Internet temporaires (Outils > Options Internet > onglet Général > bouton Paramètres). Il se pourrait que vous ayez changé le réglage par défaut pour être sûr de voir la version la plus récente à chaque rafraîchissement de page. IE/Win a des difficultés à maintenir les images d'arrière-plan sur les ancres si vous avez choisi "À chaque visite de la page". Le réglage par défaut est "Automatiquement", ce qui permet au navigateur de récupérer instantanément l'image dans le cache, et d'éviter tout clignotement. La plupart des utilisateurs ne changent jamais ce réglage ; les , ils ne connaissent même pas son existence.
Modifié par davids (24 Aug 2005 - 19:14)