Mes impressions sur le web, les standards et autres…


Bug or not bug ?

Là, je suis confronté à un problème avec Mozilla, et la documentation ne m’aide pas beaucoup, et aurait même plutôt tendance à m’embrouiller sur ce coup là : position: absolute;, largeur calculée et positionnement.

Et vous, oui vous, qu’en pensez vous ? Mon interprétation de la norme est-elle correcte ? Si oui, quelqu’un ayant un compte sur le bugzilla de Mozilla et les connaissances suffisantes en anglais pourrait-il se porter volontaire pour ouvrir une entrée sur ce bug ? (J’ai rien trouvé en faisant une recherche) :)

Edit : Bon, le billet a été publié un peu au lance pierre… Je vais donner quelques explications.

Chaque boîte a un bloc dit "bloc conteneur" auquel se référer pour obtenir les valeurs calculées de certaines propriétés comme, par exemple, la propriété width lorsqu’elle est exprimée en pourcentage. Dans le cas d’une boîte sur laquelle on applique la règle position: absolute;, ce bloc conteneur est :

  • Un ancêtre ayant pour la propriété position la valeur relative, fixed ou absolute
  • Sinon, la boîte représentant l’élément racine du document

La largeur d’une boîte correspond simplement à sa largeur (width) spécifiée ou calculée. Dans ce test, la boîte principale est positionnée en absolu (avec absolute), a une largeur spécifiée de 400 pixels et un espacement à droite de 200 pixels. Les boîtes descendantes qui sont positionnées en absolu (toujours avec absolute) et auxquelles on applique une règle width: 100%; devraient donc en toute logique avoir une largeur calculée de 400 pixels, or ce n’est pas le cas.

Concernant les propriétés top, right, bottom et left, celles ci prennent comme référenciel le bord concerné du bloc conteneur. À priori, Mozilla gère cela correctement (Je n’en dirais pas autant des autres navigateurs…).

Bien sùr, tout cela dépend de mon interprétation, correcte ou pas, de la norme.

Les normes du W3C ont ça de bien qu'on en finit jamais de les explorer.

In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The padding edge of a box defines the edges of the containing block established by the box.

Les emphases sont de moi. La specification entend donc par largeur du bloc conteneur la somme width + padding-left + padding-right (dans le cas où le bloc considéré est en position: absolute;). La largeur du bloc conteneur (div#test) des blocs descendant positionnés en absolu est donc de 600 pixels (la largeur effective additionné de l’espacement à droite).

Donc Mozilla a raison encore une fois :)