Because I didn’t specify the dimensions of the images on my page, the browser had no way of determining what those dimensions should be until the images had been downloaded and analysed (this would occur after “domready”, at “load”). Once the images on my page had been downloaded and cached, the browser knew their dimensions even at “domready” and could account for the effect the images had on the dimensions of their container elements.
I found today through a bit of testing, that Firefox 3.6 and Opera 10 behave as above i.e. they report the container element dimensions correctly after the image has been cached. I then tested Safari 5 and found that it never reports the correct dimensions of the container element if the dimensions of the image(s) are not specified – this may be due to my cache settings in Safari.
You can see an example of this behaviour here – box1 should be reported with smaller height than box 2 on first load with Firefox and Opera and probably always with Safari, if you then refresh the page, both heights should be displayed correctly. I have used Mootools element.getSize() and element.getCoordinates() in the example which are triggered onDomReady.
NOTE: I’d expect the same behaviour to occur with widths if the width of your element is dependent on the width of an image it contains.
If you find any other behaviour with other browsers, i’d be interested to know so please leave me a comment below!
I hope that saves someone the time of tracking this bug through and explains why the apparently quirky behaviour is happening.