1 Posted by Chris Eidhof on 21 January 2006 | Permalink

You can also checkout the functions getClientRect (IE) and getBoxObjectFor (Mozilla). Quite handy.

2 Posted by Shawn Wilsher on 22 January 2006 | Permalink

I am curious as to why you did not test Opera 8.5 or Mozilla's newer rendering engine, Gecko 1.8 (which can be found in Firefox 1.5). Do the newer versions behave the same way as older versions?

3 Posted by Lon on 22 January 2006 | Permalink

Scrollbar width is not always 16px on windows... it depends on your windows system settings/theme/whatever.

4 Posted by Tino Zijdel on 22 January 2006 | Permalink

I agree partly with Shawn; it would be nice to know if/when future versions of particular browsers improve on their support.
There is already a preview version of Opera 9, as well as later Gecko-builts available. This kind of information however could be provided as a footnote.

Furthermore a note for the properties tested if and which specification/standard they are defined in would also be helpfull. The client* properties for instance are to my knowing not part of any formal specification.

5 Posted by Gérard Talbot on 22 January 2006 | Permalink

1- Scrollbar width depends on user settings, theme setting, even browser themes

Start/Settings/Control Panel/Appearance and Themes category/Display/Appearance tab/Advanced button/Item:Scrollbar/Size when choosing Start/Settings/Control Panel/Appearance and Themes category/Display/Appearance tab/Font Size: Large Fonts

2- clientLeft includes the scrollbar if CSS direction is set to rtl; Opera 7+ will not do this.

3- The definition of clientWidth suggests a buggy, wrongly conceived object model. I understand why you substract the scrollbar, why you say "The CSS width/height plus the CSS padding *minus the scrollbar width*"

http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html

http://developer.mozilla.org/en/docs/Image:clientLeftRtl.png

Gérard T.

6 Posted by Milo van der Leij on 23 January 2006 | Permalink

I would like to see the effect of positioning included in the test. There is a difference (at least in IE 6) between:
<INPUT TYPE=BUTTON STYLE="position:relative" ONCLICK="alert(this.offsetTop)">
and
<INPUT TYPE=BUTTON ONCLICK="alert(this.offsetTop)">
even though that difference is not visible on the page.

7 Posted by ppk on 26 January 2006 | Permalink

Shawn, Tino, Milo, if you like to see additional tests, do them, write down the results and put a link to your piece in a comment. (Needless to say, nobody ever takes me up on such an offer).

"The definition of clientWidth suggests a buggy, wrongly conceived object model."

I think it's simply the width and height of the content part of the div.

8 Posted by Gérard Talbot on 29 January 2006 | Permalink

"I think it's simply the width and height of the content part of the div."

No, it is not.

http://www.gtalbot.org/BugzillaSection/ClientHeightComparison.html

Gérard