28220 sujets

CSS et mise en forme, CSS3

Elements en overflow tremblottent sous Firefox

Bonjour,

Voici la structure du site en question :

- Un header ayant une position absolue
- Un menu en float:left;
- Un corps qui suit le flux, avec une margin-left égale à la largeur du menu
- Un footer qui fait clear:left;

Bref, c'est assez simple et classique.
Le problème avec cette technique, c'est que j'ai parfois des clear:both dans mon corps, et si ce clear-both intervient "vers le début du corps", tout le texte qui se trouve après se trouve décalé beaucoup plus bas, en-dessous du menu.

J'ai alors pensé à changer la structure :

- Toujours le même header
- Le corps en float:right
- Le menu qui suit le flux
- Le footer en clear:right

Ainsi, comme prévu, les clears n'ont pas d'influence sur le texte se trouvant dans le corps !
Cependant, un bug très gênant est apparu sous Firefox (et Firefox uniquement) : tous mes div en overflow contenus dans mon corps "tremblottent" pendant le chargement de la page. Plus précisément, pendant quelques millisecondes ils se déplacent de quelques dizaines de pixels ailleurs sur l'écran, puis reviennent à leur position initiale.

Ce bug est vraiment gênant visuellement.
J'aimerais savoir si certains d'entre vous l'ont déjà connu, et s'ils ont trouvé des solutions. Par ailleurs, je ne tiens pas forcément à mettre mon corps en float:right, mais il faut alors que je trouve un moyen d'éviter qu'un clear présent dans le corps ne crée un grand vide qui décalerait la suite du texte en-dessous du menu.

Je rappelle que le tremblottement n'affecte _que_ les objets étant définis en overflow:auto.


Merci d'avance à tous pour vos réponses !
Bonjour,

Un élément doté de clear left réagit obligatoirement à n'importe quel flottant à gauche présent à l'écran, quelque soit leur disposition dans le code. Il n'existe aucun contournement.
Bonjour.
en restant en float:left; pour le menu et ajouter un div qui enferme le menu et le corps pas sur que ca fonctionne mais il y a des chances
Re-bonjour,

Non. C'est un bug d'IE Windows limitant l'effet de clear aux flottants situés comme le clear dans un conteneur doté de layout. Cela ne se produira pas sur les navigateurs conformes (dont le futur IE7 a priori), ou sur IE 5.x -6.0 en l'absence de layout sur le conteneur.

Voir http://test.blog-and-blues.org/haslayout/tests/float2.html

A noter: la solution du float right a l'avantage de mettre le contenu en premier dans l'ordre du flux. Ce qui bénéficie à l'accessibilité et à l'interopérabilité de la page. Quant au tremblottement, comme tous les effets de FOUC, c'est un problème négligeable.
Modifié par Laurent Denis (05 Oct 2005 - 06:07)
Administrateur
Laurent Denis a écrit :
Bonjour,

Un élément doté de clear left réagit obligatoirement à n'importe quel flottant à gauche présent à l'écran, quelque soit leur disposition dans le code. Il n'existe aucun contournement.

J'ai retrouvé un lien que tu avais donné récemment : http://www.brunildo.org/test/clear.html
Ne résoud (contourne-t)-il pas ce problème ?

(edit : ok pour le lien "float et haslayout")

a écrit :
Quant au tremblottement, comme tous les effets de FOUC, c'est un problème négligeable.

Là c'est un peu subjectif comme avis ! Smiley smile
Avoir une partie de page qui scintille constamment est très pénible à l'usage, je comprends très bien M@teo21 pour l'avoir expérimenté.
Dire que c'est "négligeable" est un peu exagéré.
Modifié par Raphael (05 Oct 2005 - 07:02)
Raphael a écrit :

J'ai retrouvé un lien que tu avais donné récemment : http://www.brunildo.org/test/clear.html
Ne résoud (contourne-t)-il pas ce problème ?


C'est à voir en effet. J'avais totalement oublié cette page de test.

Mais à comparer ces tests dans différents navigateurs (hors Mac, qui reste à voir), les solutions réels risquent d'être acrobatiques. Je me souviens avoir rencontré pas mal de difficultés dans des mises en pages complexes en passant rapidement par les overflow ou le double float. Le display:table est peut-être la meilleure piste.

A creuser (pas du tout le temps aujourd'hui, je ne devrais déjà pas traîner ici comme ça Smiley cligne )...

Pour le scintillement : il est négligeable dans la mesure où il ne se produit que pendant le chargement de la page (même s'il est désagréable). Ce ne serait évidement pas le cas s'il était permanent.
Modifié par Laurent Denis (05 Oct 2005 - 07:57)
Bonjour,

Merci déjà à vous pour vos réponses ;o)
Je viens apporter quelques compléments :

- je suis peut-être un maniaque, mais le scintillement pendant le chargement est un défaut, et les défauts j'ai tendance à les traquer jusqu'à la mort (ça s'appelle être perfectionniste en fait je crois). En clair, je suis prêt à y passer des heures s'il le faut, mais j'abandonnerai pas comme ça Smiley langue

- il me semble que le scintillement se produit aussi quand du javascript vient écrire du texte dans les div en overflow (càd que leur contenu est modifié quoi), mais uniquement sur Firefox Linux. Je n'en ai pas parlé avant car je n'en suis pas totalement sûr.

- je suis allé sur le site indiqué par Raphael hier, il est très intéressant et j'ai fouillé les possibilités. Y'a moyen d'empêcher que le clear détruise tout :
http://brunildo.org/test/clear.html
(troisième exemple)
Seulement, cet exemple implique de mettre mon corps ET mon menu en float, ce qui fait que les overflow de mon corps scintillent toujours Smiley ohwell

Délicat n'est-ce pas ?

Je n'ai jamais utilisé le display:table mais je serais bien prêt à aller y jeter un oeil. En quoi ça consiste en deux mots ?
Sujet clos
Aller à