[Resolu] à un pixel près ....

hello,

Sur la home du site de nestle.com, on observe un comportement bizarrre lorsqu'on rétrécit lentement la page en largeur :
à un moment donné et à un et un pixel près, la colonne de droite(div#col2) passe sous la colonne de gauche, si on continue de rétrécir au pixel suivant la colonne de droite se remet à la place ou elle devrait être...

Il semblerait que ça soit dû au float:right de la colonne de droite, mais je ne comprends pas pourquoi la page se comporte comme ça à ce pixel précis-là...

Quelqu'un aurait-il une explication?

Merci d'avance,

Pascal

PS : le bug ne se manifeste visilement que sur IE ( comme par hasard )
Modifié par Pascal68bis (23 Jan 2008 - 10:35)

Bonjour,

Rien vu de spécial pour ma part (IE 6 et 7).
Quand tu dis qu'elle passe sous la colonne de gauche, tu parles en vertical ou en profondeur?

si en vertical, c'est à dire que tout le bloc "Press Releases" passe à gauche sous le bloc avec la barre jaune.
C'est vrai que c'est pas évident à le mettre en évidence mais si tu rétrécis vraiment très très lentement et progressivement la largeur du navigateur, tu verras sous IE (6 et/ou 7)que le bloc de droite va passer sous le bloc de gauche, au pixel suivant il repassera à droite .

Toujours pas réussi à reproduire le problème (autre windows, IE 6 et 7).
Je passe la main.

De même, je n'ai pas réussi... C'est sous quelle version d'IE que ça passe mal ?

Bonjour,

une erreur d'arrondi probablement, il n'y a pas qu'IE qui en connait (comme les specs ne précisent pas "travaillez en interne avec 5 chiffres significatifs et arrondissez de telle ou telle manière, chaque navigateur fait comme il veut. Corrigez-moi si je me trompe)

Pourrais-tu faire une capture d'écran de la fenêtre au moment du bug? Et préciser quelle version de Windows tu as (et quel SP), quelle résolution native?

J'avais aussi pensé à une erreur d'arrondi, mais les blocs incriminés sont dimensionnés en pixels et la colonne centrale n'est pas flottante (et du coup devrait «absorber» d'éventuels problèmes de largeur des flottants).

Merci pour votre aide !
Je suis en train de me demander si je ne suis pas vicime d'hallucinations !!

Le pb m'a été remonté et sur le PC du travail j'arrive à chaque fois à reproduire le pb sous IE 6/7 mais c'est au pixel près et j'avoue qu'il faut vraiment y aller lentement.

Ici chez moi à la maison, je n'arrive pas, et pourtant j'ai IE 7 mais en fait lors du rétrécissement, le naivgateur se comporte différemment (pb de paramétrage du browser?): le redimentionnement se produit une fois le bouton de la souris relaché alors qu'au bureau, le rétrécissement se produit en direct lors du glisser-déplacer, ça permet donc de bien voir à quel moment la colonne de droite passe sous celle de gauche.

Lundi, je posterai une copie d'écran illustrant le cas au pixel près ou la colonne de droite passe sous celle de gauche .

Merci !
Modifié par Pascal68bis (20 Jan 2008 - 10:47)

Ci-joint une copie d'écran du problème que je viens à nouveau de reproduire :


Si je rétrécit de 1px de plus vers la gauche ou si je réaggandi de 1px vers la droite, la partie "Press releases" sous la barre rouge repasse à en haut à droite comme elle devrait être.

C'est vraiment au pixel près, et je peux le reproduire à chaque fois.

Ma configuration pour infos :
- Internet explorer 7.0
- windows XP, service pack 2
- résolution de 1280*1024

merci
Modifié par Pascal68bis (21 Jan 2008 - 10:49)

Ça y est, j'ai réussi à reproduire le problème (mais c'est franchement pas évident...), du moins avec IE7 (avec le 6 ça ne venait pas et j'ai eu la flemme de chercher).

Donc:
- je n'ai pas la moindre idée d'où ça peut provenir;
- mais de toute façon, on s'en fiche, non?

Ça n'a peut-être rien à voir (lol) mais sans regarder le prob évoqué ici j'ai rencontré quelque chose de très similaire sur une expérience de bloc doté d'une bordure gauche très large (genre 200px) "sur" laquelle (mais optiquement "dans" laquelle...) venait se placer un menu, dans le but inavouable d'en finir avec ce qu'on appelle "colonnes factices" qui ont pour désagrément de limiter l'expansion des designs au format de l'image de fond...
IE6 et 7 réagissaient exactement pareil à un certain moment : une valeur de positionnement arrondie faussait l'affichage, basculant le menu au-delà de la border en question. Est-ce que 0.5 pixel (bien que n'existant pas en tant qu'objet réel mais bien présent en tant qu'objet mathématique dans l'algorithme de calcul de largeur) vaut 0 ou 1 ? Vaste débat.
Apparemment (et sous réserve), les moteurs de rendu opèrent des choix sur ces valeurs non-utilisables telles quelles directement. En la matière FF et d'autres semblent opérer des choix constants (toujours pareils) mais pas IE qui tantôt opte pour 1 et tantôt pour 0... Quand, comment et pourquoi expliqueraient la difficulté de "reproduire" l'accident.
Il y a donc une question de régularité qui pose problème et empêche de se servir de ces techniques. Sans ça un commentaire conditionnel en viendrait à bout.
Modifié par Arsene (21 Jan 2008 - 14:20)

En fait j'ai modifié la largeur de div#col2 de "width : 50.1%" à 50% et ça a l'air d'être résolu.

J'ai d'ailleur jamais compris pourquoi 50% pour col1 et 50% pour col2 (le parent a une width de 100%), ne marchait pas, ça devrait pourtant. Le fait d'avoir mis 49.9% et 50.1% est un bricolage par tatonnement, désormais c'est 49.9% et 50% ..

Mais bon tant que ça marche ....


Merci

Ah purée, j'avais pas vu les pourcentages sur div#col1 et div#col2. J'avais pourtant firebugué la page la première fois, mais j'avais cru que les colonnes avaient une largeur fixe en pixels.

Si je n'étais pas bêtement passé à côté (au point de contredire Felipe qui donnait la bonne réponse... ), on aurait gagné du temps...

Bref, comme le dit Felipe, c'est un problème classique d'erreur dans le calcul des dimensions réelles (en pixels) des blocs. Il y a deux moyens pour les éviter:
- soit prévoir un peu large (un bloc en width: 50% et l'autre en width: 49% par exemple);
- soit éviter de faire flotter les deux blocs quand on veut placer deux blocs côte-à-côte (faire flotter le premier suffit).

Pour la deuxième solution, on pourra avoir un div#col2 non flottant, avec un contexte de formatage via overflow: hidden ou bien une marge à gauche de 50%.

Ouf j'ai pas halluciné !

Merci pour votre aide !!!!