[CSS2.1] Onduidelijkheid over width property specificatie

[Michali]

Ik liep net tegen een probleempje aan waar ik wat meer informatie achter wilde zoeken. Het had te maken met een element dat absoluut gepositioneerd is in een ander element (met een vaste breedte) die dat niet is, en die zelf een breedte van 100% heeft. Nu verwachte ik al dat hij 100% van het document zou aannemen, dit gebeurde in Fx, Opera en IE7 ook, echter in IE6 niet. Ik wilde eigenlijk wel weten wat de specificatie op dit gebied nu te vertellen heeft, maar daar word ik niet echt veel wijzer van.

De specificatie zegt dat een element, bij een procentuele waarde, de breedte berekent aan de hand van zijn 'containing block' (ik neem aan dat dit in dit geval altijd de 'content box' van zijn parent is). Als hij echter absoluut gepositioneerd is en zijn 'containing block' is gebaseerd op een block level element dan wordt de breedte berekent aan de hand van de 'padding box' van dat element.

Je kunt er hier meer over lezen. Het gaat dan met name over de groene tekst.

Zoals ik het interpreteer houd dit in dat als je een container element hebt met een bepaalde breedte en een padding (de 'padding box' is dan de breedte plus de padding) en je een element daarin hebt die absoluut gepositioneerd is en een breedte van 100% heeft, dat dit laatste element de breedte krijgt van de 'padding box' van de container.

Dit heb ik getest en dit blijkt niet zo te zijn. Zoals je boven namelijk al kunt lezen pakt hij de breedte van het document. Het test document kun je hier vinden. Ik wil graag weten op welk punt ik nu de fout in ga. Ik vermoed dat de 'containing block' altijd het HTML of BODY element wordt als een element absoluut gepositioneerd is. Echter slaat die groene tekst dan nergens meer op, want beiden kunnen naar mijn idee geen 'padding box' hebben. Niet zoals een normaal element althans.

[crisp]

Een 'containing block' is een blocklevel element met een position property anders dan 'static'

[Michali]

Ok, bedankt voor de info, maar dat brengt me nog niet dichter bij de oplossing, of zie ik iets over het hoofd?

[crisp]

Zolang je 'container' geen position anders dan 'static' heeft (de default) is het geen 'containing block' van je absoluut gepositioneerde element. Geef je container maar eens een position: relative en zie wat er dan gebeurd

[Michali]

Klopt, dan gaat het wel goed, maar ik begrijp het nog steeds niet. (Lastig he ) In Mozilla hebben de HTML en BODY elementen ook een static position, dus dan zou die ook niet gebruikt kunnen worden.

Bovendien wordt gezegd dat normaliter de breedte van een element wordt berekent aan de hand van de zijn 'containing block'. En als een element niet absoluut gepositioneerd is, dan krijgt hij de breedte relatief aan de breedte van de content box van zijn 'container', dat volgens de definitie die je net gaf geen 'containing block' kan zijn (omdat hij dus position: static heeft). Hoe zit dat?

[crisp]

Michali schreef op vrijdag 16 november 2007 @ 14:52:
Klopt, dan gaat het wel goed, maar ik begrijp het nog steeds niet. (Lastig he ) In Mozilla hebben de HTML en BODY elementen ook een static position, dus dan zou die ook niet gebruikt kunnen worden.

Bovendien wordt gezegd dat normaliter de breedte van een element wordt berekent aan de hand van de zijn 'containing block'. En als een element niet absoluut gepositioneerd is, dan krijgt hij de breedte relatief aan de breedte van de content box van zijn 'container', dat volgens de definitie die je net gaf geen 'containing block' kan zijn (omdat hij dus position: static heeft). Hoe zit dat?

Dan kom je uit op de 'containing block' van het root-element, en die wordt gedefinieerd door de viewport

Zie overigens:

quote: http://www.w3.org/TR/CSS2...#containing-block-details

1. The containing block in which the root element lives is a rectangle with the dimensions of the viewport, anchored at the canvas origin for continuous media, and the page area for paged media. This containing block is called the initial containing block. [...]

[...]

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way: [...]

[ Voor 25% gewijzigd door crisp op 16-11-2007 15:01 ]

[Michali]

Dat beantwoordt inderdaad mijn vragen. Super bedankt weer, ik ben weer een stuk wijzer op dit gebied!