W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: [cssom] Element size/positioning information

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 11 Apr 2011 21:32:58 -0700
Message-ID: <e5742f1c1b744c0815ca7341511d6510.squirrel@cp3.shieldhost.com>
To: "Garrett Smith" <dhtmlkitchen@gmail.com>
Cc: "www-style list" <www-style@w3.org>

Le Lun 11 avril 2011 21:07, Garrett Smith a écrit :
> On 4/11/11, "Gérard Talbot" <www-style@gtalbot.org> wrote:
>> Le Lun 11 avril 2011 18:46, Garrett Smith a écrit :
>>> On 4/11/11, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>>> The current OM APIs for determining the size and position of an
>>>> element are verbose and confusing.
>>> Uh huh.
>>>> Determining the Size of an Element
>>>> ==================================
>>>> Right now there are four ways of asking for the width of an element:
>>>> elem.clientWidth, elem.scrollWidth,
>>>> elem.getBoundingClientRect().width, and
>>> Nope. The `width` property is not reliable cross-browser. That's yet
>>> another example of  AVK taking an MS APIs and changing it to make it
>>> incompatible with the very API it is purported to standardize. Can you
>>> think of a better way make browsers more interoperable?
>>>> getComputedStyle(elem,'').width (similarly for height).
>>> Uh , aren't you forgetting offsetWidth?
>>>> It's completely unobvious what each of these do
>>> That happens when you don't read specs. (From MSDN, MDC, W3C).
>> Hello Garrett :)
> Hey.
>> You have to be careful too about specs and documentation websites from
>> browser manufacturers. There are errors too in those. And browsers also
>> have bugs too, you know :)
> Yeah.
>> There are at least 4 errors in the diagrams of this MSDN webpage:
>> http://msdn.microsoft.com/en-us/library/ms533024.aspx
>> 1- top and left offset properties are shown to be located between margin
>> area and padding area: this is clearly wrong.
> There isn't any margin area; AFAICT margin could be 0.

Garrett, observe the 2nd diagram at ms533024.aspx. The middle diagram.

div.style.top is located between div.style.marginTop and div.clientTop :
that implies a violation of the CSS1 box model. Offsets (top, left,
bottom, right) must apply to margin box, to the CSS1 box model.

Observe this diagram:


taken from


The offsets (top, left, bottom, right) are outside the CSS1 box model.
That is not what MSDN does in the 2nd diagram.

I have MSDN previous measurement and position diagram at


and they did the same mistake.

In another document


they show the offsets at the correct places:


> "The sample page contains a div element that is relatively positioned
> on the page."
> Whether or not offsetTop includes the border width (clientTop) depends
> on the version and mode of IE.

That is also not useful. I do not know if offsetTop is suppose to include
border-top width from examining MSDN's own diagram. So, this is another

regards, Gérard
CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Tuesday, 12 April 2011 04:33:30 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC