IE6/IE7 vs. IE8 give different document.documentElement.scrollHeight

D

Daniel Kabs

Hi there,

to make a long story short: in Internet Explorer 8, I am having problems
getting the correct height of the HTML element.

As you know, the HTML element is the outermost box in a document. The
W3C has standardized document.documentElement as a shortcut to this
element through client side Javascript. The height of the HTML element
can be gathered from document.documentElement.scrollHeight. See MSDN for
further reference:

documentElement Property
http://msdn.microsoft.com/en-us/library/ms533739(VS.85).aspx
scrollHeight Property
http://msdn.microsoft.com/en-us/library/ms534615(VS.85).aspx


Now document.documentElement.scrollHeight gives different results on
IE6/7 and IE8.



As an example, try this short page (which is rendered in
standards-compliant mode):

http://www.colincochrane.com/examples/doctypes/html401-transitional.html

Then execute the following Bookmarklet:

javascript:alert(document.documentElement.scrollHeight);void(document.documentElement.style.border="1px
solid green");

It outputs the height of the HTML element (and creates a green border
around the HTML element to make is visually prominent).

I get the following results

IE6: 149
IE7: 149
IE8: 812

Why is this?
How can I get a consistent reading of the height of the HTML element in
all versions of IE?

Thanks for any help in advance,
Daniel
--
,-. . . .
,-. ,-. | | ,-. /,-.\ | , ,-. |-. ,-. . ,-| ,-.
| | |-' ||| `-. |,-|| |< ,-| | | `-. | | | |-'
' ' `-' `^' `-' \`-^/ ' ` `-^ ^-' `-' ' :; `-^ `-'
`-'
 
E

Eric Bednarz

Daniel Kabs said:

Why wouldn’t you just use the console?
javascript:alert(document.documentElement.scrollHeight);void(document.documentElement.style.border="1px
solid green");
[…]

I get the following results

IE6: 149
IE7: 149
IE8: 812

I get 148 in ‘IE7 Standards’ mode and 160 in ‘IE8 Standards (Page
Default)’. document.body.currentStyle.margin differs between the two
modes, so that would explain that little difference.
Why is this?

Maybe you pushed some wrong buttons in the developer toolbar, or put
your site in the Compatibility View list without noticing.
How can I get a consistent reading of the height of the HTML element
in all versions of IE?

In *all* of them? :)
 
D

Daniel Kabs

Eric said:
Why wouldn’t you just use the console?

Where is the console in IE6 and IE7?
I get 148 in ‘IE7 Standards’ mode and 160 in ‘IE8 Standards (Page
Default)’. document.body.currentStyle.margin differs between the two
modes, so that would explain that little difference.

That's strange. I wonder why I get a totally different value.
Maybe you pushed some wrong buttons in the developer toolbar, or put
your site in the Compatibility View list without noticing.

When IE8 is in Compatibility View, navigator.userAgent should contain
the version string "MSIE 7.0". I will check this.

I will also do my tests again with a fresh installation of XP, just to
make sure.

Thanks.

Cheers
Daniel
--
,-. . . .
,-. ,-. | | ,-. /,-.\ | , ,-. |-. ,-. . ,-| ,-.
| | |-' ||| `-. |,-|| |< ,-| | | `-. | | | |-'
' ' `-' `^' `-' \`-^/ ' ` `-^ ^-' `-' ' :; `-^ `-'
`-'
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top