IE : 5px jog ?

Bonjour,

Pour faire simple, disons que j'ai :

<DIV1> (width=W1% - margin 0 - padding 0)
     <DIV10> (width=W10% - margin-left=ML10% - padding 0)
          <DIV101> (width=W101% - margin-left=ML101% - float left - padding 0)
          <DIV102> (width=W102% - margin-right=MR102% - float right - padding 0)

J'ai bien fait attention à ce que W101% + W102% + ML101% + MR102% < 100%
J'ai bien fait gaffe à corriger les histoires de doublement de marge avec les flottants pour IE < 7.

Le résultat est conforme à mon attente sous FF et Konqueror

MAIS, pour ce qui est d'IE6 :

Relativement à DIV101 :
Son offsetWidth est supérieur de 5 pixels très exactement par rapport à la logique mathématique et ce quelle que soit l'offsetWidth de DIV1 !

Relativement à DIV102 :
Le résultat est à peu près n'importe quoi :
( 2px en plus pour 770px d'offsetWidth de DIV1 et conforme à la logique mathématique pour 1410 d'offsetWidth de DIV1 )

D'où mes questions :

1/ D'où proviennent ces 5px de plus pour DIV101 ?
2/ Ce phénomène concerne-t-il tous les IE (7 inclus) ou que IE < 7 voire d'autres navigateurs ?
3/ Quelle est la façon la plus conforme aux standards pour contourner ce glitch ?
Modifié par aCOSwt (11 Sep 2007 - 11:28)

Heu... MR102%, DIV101, offsetWidth, glitch?

Désolé aCOSwt, mais ton message donne l'impression que tu fais exprès d'être incompréhensible. Nous t'avons pourtant connu plus limpide sur ce forum.

J'avoue que tu m'as perdu avec ton explication. Quand aux moins endurcis que moi, ça doit être pire.

Une petite page en ligne, peut-être? En général, ça parle à tout le monde.

Florent V. a écrit :

Désolé aCOSwt, mais ton message donne l'impression que tu fais exprès d'être incompréhensible.

Désolé, j'avais juste fait exprès de vouloir faire simple...
(Ceci me rappelle au passage un bon critique littéraire qui avait dit d'un ouvrage qu'il aurait pu être court si son auteur n'avait pas voulu faire court...

- En fait, MR102%... sont des valeurs en %,
- l'offsetWidth du DIV n'est rien d'autre que document.getElementById('id_du_div').offsetWidth
- Et glitch c'est... de l'anglais...

Pardon donc pour mon essai raté.

Dans les faits :

+--------------------------------------------------------+
|DIV (id="DIV1")                                         |
|           +-----------------------------------------+  |
|           |DIV (id="DIV10")                         |  |
|           |                                         |  |
|           | +-----------------+ +-----------------+ |  |
|           | |DIV (id="DIV101")| |DIV (id="DIV102")| |  |
|           | |                 | |                 | |  |
|           | +-----------------+ +-----------------+ |  |
|           +-----------------------------------------+  |
+--------------------------------------------------------+

Voilà donc ce que je souhaite obtenir (et que j'obtiens sans problème avec Firefox et Konqueror) sachant que toutes les largeurs de container ainsi que les marges sont exprimées en pourcentages.

Et mon problème qui est que la lageur effective du container DIV101 est, sous IE 6, de exactement 5 pixels trop grande par rapport au calcul mathématique et ce quelle que soit la largeur du container DIV1.
Modifié par aCOSwt (11 Sep 2007 - 12:40)

Moi, j'arrive mieux à comprendre quand je vois :]

Ton site est en ligne ?

Avec le schéma, c'est déjà de suite plus clair.

Mais pour débusquer le problème et tenter proposer des solutions, une page de test en ligne (ou le code de la dite page) serait effectivement utile.

Sans avoir le code précis, tout ce que je peux dire c'est que:
- les problèmes de calcul erroné des marges (et peut-être des dimensions) en pourcentages avec IE existe;
- il me semble que ce problème n'est pas systématique, et donc qu'il doit y avoir un facteur déclencheur ou quelque chose qui permet de l'éviter;
- dans le genre «facteur déclencheur» ou «facteur correcteur», le HasLayout est généralement un bon candidat.

Je vérifierais rapidement le statut de DIV10 (conteneur intermédiaire): dimensionné avec une largeur en pourcentages (donc HasLayout) ou uniquement avec une marge à gauche (pas de HasLayout)? Qu'est-ce que ça donne si on change le statut (conférer le layout s'il ne l'a pas, et inversement)?

Mais j'avoue que c'est une idée en l'air.

@Cocopop : Pardon, j'avais un peu de ménage à faire...
La page en test est visible ici : http://perso.orange.fr/finis-europae/demopor/Pages/Index.html
- Le DIV parent (DIV10) c'est le carton à dessin
- Le DIV problématique (DIV101) C'est le papier blanc.
- DIV102 c'est le pseudo-papier-journal de droite.

Deux points supplémentaires pour le moins étranges sur IE6 :

1/ La largeur de DIV101 ne change pas même si je force son style.width en JS !!!

2/ La goutte d'encre en haut est dans un sous div de DIV101 en float right / margin right. Et bien son positionnement est exactement comme si la largeur de DIV101 était conforme à sa valeur théorique !!!!!

@Florent V. : hasLayout est à true pour le parent (DIV10) mais je ne vois pas bien comment le passer à false car j'ai besoin de son attribut width qui, à ma connaissance, suffit pour donner un layout à un bloc.
Modifié par aCOSwt (11 Sep 2007 - 15:40)

aCOSwt a écrit :
@Florent V. : hasLayout est à true pour le parent (DIV10) mais je ne vois pas bien comment le passer à false car j'ai besoin de son attribut width qui, à ma connaissance, suffit pour donner un layout à un bloc.

Tu as le code suivant:

margin-left: 16%;
width: 70%;

et tu pourrais avoir le code suivant à la place:

margin: 0 14% 0 16%;

Florent V. a écrit :

Tu as le code suivant:

margin-left: 16%;
width: 70%;

Heuu... pour les navigateurs autres qu'IE<7 j'ai effectivement ce code mais justement pour ces #[@[]@! d'IE qui n'acceptent pas de min-width, j'ai recours à la techique... raphaélienne... :

Commentaire conditionnel et :

width:expression(document.body.clientWidth < 914 ? "640px" : "70%");

Je ne vois donc pas bien comment me passer de width.

Ah ben oui, si tu utilises width via Javascript pour simuler un min-width, ça fera désordre.
Ceci dit, je rappelle que le but était de tester le comportement en l'absence de HasLayout (même si dans ce cas précis je doute que ça ait un impact), pas de le supprimer définitivement.

Florent V. a écrit :

Ceci dit, je rappelle que le but était de tester le comportement en l'absence de HasLayout

Yesss !
Tu as raison ! Restons on topic !

Ce sidi... Brahim... J'y perds mon CSS !
(On notera au passage que ceux qui affirment y perdre leur latin sont ceux qui ne connaissaient pas la latin à la base.)

Rontudjuuu !

has ou pas has layout, le résultat est le même !
j'ai viré mes ersatzs de min-width en simili fait à Roubaix, mes margins en pourcentages, mes margins tout court puisque 0px que je leur ai mis, ma page ne ressemble plus à rien mais le résulat lui est toujours le même et édifiant de sottise :

68 % de 640 = 440 et non 435 et des brouettes !!!!! d'une part
Et pire ! Si ! C'est possible ! Au secours Julien Royer ! :

document.getElementById('MONDIV_A_LA_C..').style.width="435px";
alert(document.getElementById('LE_MEME_DIV_A_LA_C..').offsetWidth);

Affiche glorieusement... 440 !

Gnnnnniiiiii !
Modifié par aCOSwt (11 Sep 2007 - 23:33)