Back To Website Design Forum

Using !DOCTYPE invalidates client height

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post October 4th, 2009, 12:09 pm

I've been looking around for an explanation for this, occasionally, for a while and still have not found one.

This will pop up an alert with the pixel height of the browser window:
Code: [ Select ]
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" >
<script type="text/javascript">
function getHeight () {
    var H; 
    if (navigator.appName == "Microsoft Internet Explorer") H =      document.documentElement.scrollHeight;
    else H = document.body.scrollHeight;
    alert(H);
}
</script>
</head>
<body onload="getHeight()">


</body></html>
  1. <html>
  2. <head>
  3. <title>Test</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" >
  5. <script type="text/javascript">
  6. function getHeight () {
  7.     var H; 
  8.     if (navigator.appName == "Microsoft Internet Explorer") H =      document.documentElement.scrollHeight;
  9.     else H = document.body.scrollHeight;
  10.     alert(H);
  11. }
  12. </script>
  13. </head>
  14. <body onload="getHeight()">
  17. </body></html>


However, if you add this (or any doctype what-so-ever) to the top:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.   "http://www.w3.org/TR/html4/loose.dtd">

The height will always come out as 0 (FF) or way too low (IE).

My problem is, I have someone I do work for who insists that everything must pass a W3C validation. You must declare a doctype to do that.

Anyone know why this would happen? Or best of all -- a SOLUTION???
Image
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 4th, 2009, 12:09 pm

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 17, 2005
  • Posts: 1585
  • Status: Offline

Post October 5th, 2009, 1:43 pm

What you are doing is referencing the <body> elements height by using "document.body.scrollHeight;", and your body element is empty. To see what I mean, fill your body with some content, and you will get a larger height returned in your alert box.

I'm not sure if this is the proper way to do this, but here is a solution to your problem which gets the height of the documents <html> tag:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
function getHeight()
{
var H = (navigator.appName == "Microsoft Internet Explorer") ? document.documentElement.scrollHeight : document.getElementById('html').scrollHeight;
alert(H);
}
</script>
</head>
<body onload="getHeight(); ">
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html id="html">
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <script type="text/javascript">
  7. function getHeight()
  8. {
  9. var H = (navigator.appName == "Microsoft Internet Explorer") ? document.documentElement.scrollHeight : document.getElementById('html').scrollHeight;
  10. alert(H);
  11. }
  12. </script>
  13. </head>
  14. <body onload="getHeight(); ">
  15. </body>
  16. </html>


It's good to use a DTD, personally I use the Strict one for everything, and it solves a lot of problems in the long run. I usually don't like to mess with trying to know the height/width of the browser and all that stuff, because I prefer fluid type things. In my opinion it's not very reliable.
There's no place like 127.0.0.1, badass part is now it's ::1
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post October 5th, 2009, 2:53 pm

PolishHurricane wrote:
It's good to use a DTD, personally I use the Strict one for everything, and it solves a lot of problems in the long run. I usually don't like to mess with trying to know the height/width of the browser and all that stuff, because I prefer fluid type things. In my opinion it's not very reliable.


Yeah, I basically agree, I am trying to use XHTML 1.0 Strict all the time now, and prefer percentages to pixels. I was just a tad baffled by this -- your explanation (that the body is empty) does not, however, cover why the answer would be correct without the DTD (even if the body is empty) -- my blind guess is that it has to do with the browser processing an extra preliminary request, and this delay affects some timing...
Image
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post October 5th, 2009, 3:33 pm

did you try just height? I believe scroll height is giving you the difference between the actual height and the window height (which may not even exist on the document object). Also out of curiosity is there any reason that it has to validate strict? Why not change to transitional and see if it validates then?
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 17, 2005
  • Posts: 1585
  • Status: Offline

Post October 5th, 2009, 3:37 pm

It has nothing to do with delays. It's because the browser is running in Quirks Mode when you omit the DTD. Documents that don't have a document type definition are not defined to the browser as anything so they can do whatever they please with them, it's as simple as that. It does have to do with the browser, however a browser shouldn't even be required to do anything with an HTML document that doesn't have a DTD in the first place. In the case of FireFox it tries to be backwards compatible, which if anything is a luxury. I'm not saying I'm a JavaScript expert, however what I assume is the code you wrote, back in the day would have grabbed the entire documents height, however these days, in FireFox it just grabs the height of the body element "document.body", which is 0, because you have nothing in your body. Try putting the word "TEST" in your body, you'll see that it's around 20 pixels (with the DTD).

Basically what you're doing by running it without a DTD and saying "Oh but it works without the DTD" is irrelevant. Because that's not how you make web docs and you shouldn't have been making that web doc without a DTD in the first place AT ALL.

Simple Explanation for (document.body.scrollHeight):
In Quirks Mode = the height of the document.
In Standards Mode = the height of the <body> element.

Perhaps these will help you out:
https://developer.mozilla.org/en/Mozill ... ds_mode.3f
https://developer.mozilla.org/en/Mozill ... e_Behavior
http://www.quirksmode.org/ (Interesting site a developer made)

Oh and BTW...

graphixboy wrote:
... Also out of curiosity is there any reason that it has to validate strict? Why not change to transitional and see if it validates then?


It doesn't have to validate to strict, it will work with any type of DTD. Even with: <!DOCTYPE html>, it just has to have Standards Mode activated.
There's no place like 127.0.0.1, badass part is now it's ::1
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post October 5th, 2009, 3:54 pm

PolishHurricane wrote:
It has nothing to do with delays. It's because the browser is running in Quirks Mode when you omit the DTD.


Okay now that makes sense! Thanks, PolishHurricane!

I tested your code from post #2; it gives a correct value in FF but not (surprise surprise) in IE7. PLUS it didn't actually validate!!!

But no big whoop. I think I'll stick to the percentages and be happy ;)

Quote:
Basically what you're doing by running it without a DTD and saying "Oh but it works without the DTD" is irrelevant. Because that's not how you make web docs and you shouldn't have been making that web doc without a DTD in the first place AT ALL.


Yeah, yeah, yeah... :roll: Hey check my new sig!
Image
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 17, 2005
  • Posts: 1585
  • Status: Offline

Post October 5th, 2009, 5:57 pm

mk27 wrote:
I tested your code from post #2; it gives a correct value in FF but not (surprise surprise) in IE7.


This is what IE does to websites... :microwave2:

mk27 wrote:
PLUS it didn't actually validate!!!


To fix the W3C validation error use this code:

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="html">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
function getHeight()
{
var H = (navigator.appName == "Microsoft Internet Explorer") ? document.documentElement.scrollHeight : document.getElementById('html').scrollHeight;
alert(H);
}
</script>
</head>
<body onload="getHeight(); ">
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="html">
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <script type="text/javascript">
  7. function getHeight()
  8. {
  9. var H = (navigator.appName == "Microsoft Internet Explorer") ? document.documentElement.scrollHeight : document.getElementById('html').scrollHeight;
  10. alert(H);
  11. }
  12. </script>
  13. </head>
  14. <body onload="getHeight(); ">
  15. </body>
  16. </html>
There's no place like 127.0.0.1, badass part is now it's ::1

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.