[Résolu] Etrange bug sous IE6 avec un float + a :hover

Bonjour,

J’ai un comportement étrange sous IE6 avec un élément floaté à gauche et du texte contenant un lien. Au survol du lien mon élément floaté se trouve masqué. Bon plutôt que décrire ça sur 3 pages j’ai mit en ligne un exemple :

http://2mx.fr/medias/forums/css-bugs/mise-en-page/float/ie6-bug-float-a-hover.html

Le plus étrange et que si je supprime la propriété background-color sur mon lien tout marche de nouveau !

J’ai passé l’après midi sur ce bug d’affichage, cherché sur le net, ect… mais NADA ! Je ne trouve pas la solution s’il y en a une

Est-ce que quelqu’un pourrai m’éclairer sur ce mystère ?


Laurent
Modifié par 2mx (08 Jul 2008 - 10:30)

Bonjour et bienvenue 2mx,

je venais de résoudre ton problème en rajoutant un div à la fin du div .body un div doté des instructions

	clear: both;
	font-size: 1px;
	line-height: 1px;

Voir: http://forum.alsacreations.com/faq/faq-6-Comment-eviter-que-mes-elements-flottants-float-depassent-de-leur-conteneur-.html

mais en fait, en enlevant ton hack _height: 1%; (que je n'avais point vu), tout rentre dans l'ordre sans autre souci ...

Préfère zoom: 1; pour tous ces petits soucis de hasLayout, qui n'est de toute façon compris que d'IE et puis idéalement mieux vaut le servir à IE via les commentaires conditionnels (m'enfin pour cette instruction-là, certains font une exception ...)
Le hack de l'underscore, mieux vaut en tout cas s'en passer


Es-tu bien certain d'avoir besoin d'un prologue XML?
Voir http://forum.alsacreations.com/faq/faq-71-Faut-il-utiliser-le-prologue-XML-dans-ma-page-web-.html et le tuto associé
Modifié par Felipe (07 Jul 2008 - 21:06)

Merci Felipe d'avoir pris le temps de me répondre.

Felipe a écrit :

je venais de résoudre ton problème en rajoutant un div à la fin du div .body un div doté des instructions

	clear: both;
	font-size: 1px;
	line-height: 1px;

Voir: http://forum.alsacreations.com/faq/faq-6-Comment-eviter-que-mes-elements-flottants-float-depassent-de-leur-conteneur-.html

mais en fait, en enlevant ton hack _height: 1%; (que je n'avais point vu), tout rentre dans l'ordre sans autre souci ...

Haaaa ! Moi aussi je n'avais pas vu qu'il était resté là. Sur la fin je me suis mis a essayer tout et n'importe quoi.

Et effectivement après l'avoir supprimer ça marche...

En faite mon problème n'est pas le dépassement de l'élément float mais son masquage au survol du lien. Ha oui, j'ai oublier de dire que le bug n'a pas lieu si je supprime background-color du style a:hover.view !!


Ce qui me fait remarqué que je n'ai pas ajouté le style clearfix pour évité le problème du dépassement du float (j'utilise : http://www.positioniseverything.net/easyclearing.html ). Voila c'est chose faite et ... ça bug de nouveau.

Felipe a écrit :

Es-tu bien certain d'avoir besoin d'un prologue XML?
Voir http://forum.alsacreations.com/faq/faq-71-Faut-il-utiliser-le-prologue-XML-dans-ma-page-web-.html et le tuto associé

Effectivement je n'en est pas besoin, merci. Par contre après l'avoir supprimé et sans le style .clearfix ça bug sur la dernière ligne .

Bon il semble donc que le bug soit du a la technique utilisé pour éviter que les éléments flottants dépassent.

Je vais creuser ça...
Modifié par 2mx (08 Jul 2008 - 10:31)

Je viens de lire ce post http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ qui donne plusieurs méthodes dont la plus simple d) pour éviter le dépassement des éléments flottants :

Ajouter la propriété overflow au div conteneur et la mettre sur ‘auto’.

Ce qui marche très bien sous IE7 et Firefox2 et 3 mais pas sous IE 6

http://2mx.fr/medias/forums/css-bugs/mise-en-page/float/ie6-bug-float-a-hover-solution-overflow.html

Après lecture de la méthode c) en passant la classe .body en float :left et en passant .clearfix sur le div.row ça fonctionne :

http://2mx.fr/medias/forums/css-bugs/mise-en-page/float/ie6-bug-float-a-hover-solution.html

Bon maintenant si j’avais utilisé un div supplémentaire avec clear: both; font-size: 1px; line-height: 1px; je n’aurai pas perdu une journée avec tout ces hacks !

Parfois je me demande si c’est vraiment une bonne idée d’éviter le dépassement des éléments flottants sans marqueur supplémentaire ?

Merci encore Filipe.

La solution décrite ci-dessus ne fonctionne pas avec firefox 3 !

Y a pas a tortiller il faut un div supplémentaire avec clear: both; font-size: 1px; line-height: 1px;