Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

document.body.offsetHeight in Internet Explorer 6 5

Status
Not open for further replies.
xso

xso

Programmer
Apr 12, 2002
71
DE
Hello there,

I found what looks like a bug to me with IE6. I'm using the document.body.offsetHeight property, and with no dtd or an html dtd, it gives the correct answer (in my case 906). However, using an xhmtl dtd, like
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;<html xmlns=&quot;it now, gives 0, which ruins the whole javascript. I think it's a bug because it still give the correct answer for offsetWidth. It just has problem with offsetHeight.

Has anyone else experienced this, and if, yes, did you find any work-around?

Here is the code, in case you wanna give it a try:
winW = document.body.offsetWidth
winH = document.body.offsetHeight
document.writeln(winH)
document.writeln(winW)

Thanks in advance and cheers,

Xavier

PS: Does anyone know any bug database for IE6?
 
Sort by date Sort by votes
xso this could be a bug but my guess is that offsetWidth is the one that is buggy here because using a DTD is supposed to make IE enter STRICT mode where older non standards code is not supposed to work but standards do.

May I recommend that you use this instead :

var IE = (document.all) || false;
winW = (IE) ? document.body.clientWidth : window.innerWidth;
winH = (IE) ? document.body.clientHeight : window.innerHeight;

That should work in a majority of browsers regardless of DTD (well I hope anyways). Let me know if you still have the bug I'm interested.

I do recommend that you post things relating to JavaScript in the JavaScript forum. I realize this is kindof a CSS/HTML/JavaScript/DTD problem in most cases someone that knows JavaScript knows HTML but not always vice versa. Starway, the top expert of this forum for example is an experienced JavaScript developper and dealt with questions like yours often. He is also one of the top experts of the javascript forum section. Gary Haran
 
Upvote 0 Downvote
Hi xutopia,

I hope you don't mind I continue this discussion here at the HTML/CSS forum ;-)
Interesting these body-properties &quot;clientHeight&quot; (and ..With)
(Why isn't that written in my expensive reference 'javascript, the Definitive Guide, from David Flanagan', they told me that this book contains everything !!
By the way I still recommend this book to everyone)

Can you tell me the 4 pixels difference between clientHeight and offsetHeight (offsetheigth = +4)

Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
I unfortunalty don't have an answer for you here on the 4 pixel difference but if you do find one please let me know by either posting a hint or reaching me on my website (which I will eventually update).

Happy throwing. Gary Haran
 
Upvote 0 Downvote
Guys, I think this will bring some light on the problem:
It is said there, that &quot;[tt]When standards-compliant mode is switched on, the height property specifies the distance between the top and bottom edges of the bounding box that surrounds the object's content.
When standards-compliant mode is not switched on, and with earlier versions of Internet Explorer, the height property also includes the border and padding belts that surround the object's bounding box.[/tt]&quot;

However, I can't confirm or deny this as I didn't research this question yet.

good luck
 
Upvote 0 Downvote
Folks,

First of all, many thanks for all you answers. And my apologize for being late answering but... they replaced my PC at work and you know what that means ;->

OK, I found a work-around and here it is:
//Netscape 6 and Internet Explorer 6
if (document.documentElement && document.documentElement.offsetHeight){
winW = (is.ns)? window.innerWidth : document.documentElement.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.documentElement.offsetHeight-4
}
//Internet Explorer 5
else if (document.body){
winW = document.body.offsetWidth-20
winH = document.body.offsetHeight-4
}
//Others
else {
winW = (is.ns)? window.innerWidth : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight-4
}

Which means that Internet explorer 6 with a loose dtd acts like IE5 (document.body.offsetHeight-4), when, with a sctrict dtd or xhtml, you need to use document.documentElement.offsetHeight. Tricky but it makes sense, as IE6 switch its engines in function of the dtd that is being used.

The -4 is the space taken by IE for the scrollbar.

I hope this answers some of the questions.

Thanks once again for your help and cheers,

Xavier
 
Upvote 0 Downvote
There is a really easy way to stop IE6 going into standards compliant mode with an xhtml doctype. Simply put an xml declarion like this as teh first line of your code:

<?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?>

this stops IE6 going compliant with no side effects. However your page wont validate if this is not the first line in the source else this is perfectly valid.

does mean there may be some issues with future changes to your work when standards come to the fore.....your choice but for the moment it is doing it for me!

hope this helps

rob
 
Upvote 0 Downvote
Ho crazyboybert and xutopia,

Crazyboybert, I gave it a try and it did not work. It still gives wrong height and width. I posted my solution just above your post and I tend to prefer it because I do not want to stop IE6 going into compliant mode (I support web standards ;->). Thanks for your help anyway!

Xutopia, your code is working. Thanks! Would you have any comments about the fix I submitted? Thanks and cheers,

xso
 
Upvote 0 Downvote
I wasn't sure what you meant with is.ns. Because Netscape 6 and Netscape 4 are so different there is not much of a reason to have is.ns anymore but rather have is.ns4 or is.dom. I have a question for you. Do you still support NS4?

I really like your fix. I would however change it a little bit to look like this (i'm picky about coding convention, there is nothing wrong with your I am just used to sun's Java coding convention that I run a script to make all my js look exactly that way so I can read them easier) :

var winW, winH;
if (document.documentElement && document.documentElement.offsetHeight)//DOM1
{
winW = (window.innerWidth) ? window.innerWidth : document.documentElement.offsetWidth - 20 ;
winH = (window.innerHeight) ? window.innerHeight : document.documentElement.offsetHeight - 4 ;
}
else if (document.body)// IE in old mode
{
winW = document.body.offsetWidth - 20;
winH = document.body.offsetHeight - 4;
}
else if (window.innerWidth)
{
winW = window.innerWidth ;
winH = window.innerHeight;
}

The difference here is that winH and winW will be undefined if any of the tests don't run. I like your usage of document.documentElement. You don't see very many people looking at the Gecko Reference which is the standard by which all JS programmers should update their codebase with.

For those interested the reference can be found at :

Gary Haran
 
Upvote 0 Downvote
Hi Gary,

Many thanks for your post. Yes, I'm still one of these unlucky guys out there forced to support NS4... I hate it as much as I love Mozilla ;->

I like your patch and I'll use it. It's true that many people out there looking at the standards. It's strange because using standard xhtml and JavaScript (should I call it ECMA?) just makes life much easier.

I'm also a fan of Java, but we use PHP at work. However I find JSP much more elegant than anything else I've worked with (ASP & PHP).

Cheers,

xso
 
Upvote 0 Downvote
I was lucky enough to have really understanding bosses. We are selling a DHTML invoicing system and doing it supporting NS4 was simply impossible to code. It is too bad because NS4 was really fast at doing mathematics with JavaScript. But the DOM was so hard to work with.

I think ECMAScript is going to be called JavaScript for a long time (perhaps even forever). Maybe we will live long enough to see people talk about ES one day instead of JS. I hope so anyways! :)

I really enjoyed working with php. My first project was (French site here in France). But Java/JSP is much more fun indeed. Gary Haran
 
Upvote 0 Downvote
>>I was lucky enough to have really understanding bosses.
Great! Mine things that the little x in outlook is for closing an email, when it actually deletes it ;->

>>Maybe we will live long enough to see people talk about ES one day instead of JS. I hope so anyways! :)
I hope it too. Standards are nice and really make web developers'life easier. You can actually focus on functionality and not on debugging ;->

>>I really enjoyed working with php. My first project was (French site here in France).
I was in France for 2 years. Then in Greece for 3,5 years and now in Frankfurt (Germany) since 1 year. I hope you have a great time in France. I really enjoyed my stay in Paris.

>>But Java/JSP is much more fun indeed.
And so much elegant. Tag libraries, servlets, java beans, filters... So much power in such an elegant language.


Thaks for your precious help once again.
 
Upvote 0 Downvote
Obviously a bug in IE6.
Anyway , this'll give the right (loaded) body height
in 4 to 6 versions of IE :
/**/
with(document){
if(all) var H= body.offsetHeight>0 ?
body.offsetHeight :
documentElement.offsetHeight }
/**/
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
754
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
696
PeDa
PeDa
Alt255
  • Locked
  • Question
Navigate to bookmark in local file
Replies
2
Views
628
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top