#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Switzerland
    Posts
    64
    Rep Power
    14

    IE6: XHTML vs. JavaScript capabilities??


    My document is compliant to this doctype:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Problem: I am no longer able to use "document.body.scrollLeft" and "document.body.scrollTop" in IE 6. They always equal zero. If I remove the doctype, they work fine.

    I would like to know more about this correlation (most importantly: about how to solve this problem!). Help appreciated!

    -------------------------------
    Here is some sample code. Please try it yourself: Load it, resize the window, scroll down and press the button. The <input> should then contain the correct scrollTop offset.

    This _will_ work:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    	</head>
    	<body>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<form name="myform">
    			<input type="text" name="scrollinfo">
    			<input type="button" value="ShowMe" onclick="document.myform.scrollinfo.value = document.body.scrollTop">
    		</form>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    	</body>
    </html>
    This will _not_ work! Only the doctype is different.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
    	<head>
    	</head>
    	<body>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<form name="myform">
    			<input type="text" name="scrollinfo">
    			<input type="button" value="ShowMe" onclick="document.myform.scrollinfo.value = document.body.scrollTop">
    		</form>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    	</body>
    </html>
    Last edited by reptile; November 27th, 2001 at 07:34 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Wilmslow, Cheshire
    Posts
    255
    Rep Power
    18
    I'm only just starting to dig into this xhtml stuff. Does it have any effect if you close the input tags? i.e.:

    <input type="text" name="scrollinfo">
    <input type="button" value="ShowMe" onclick="document.myform.scrollinfo.value = document.body.scrollTop">


    Becomes:

    <input type="text" name="scrollinfo" />
    <input type="button" value="ShowMe" onclick="document.myform.scrollinfo.value = document.body.scrollTop" />

    Might do...
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Switzerland
    Posts
    64
    Rep Power
    14
    you're of course perfectly right about this mistake in my dirty sample, but that's not it.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Switzerland
    Posts
    64
    Rep Power
    14
    I have found out that if I put some comment BEFORE the <!doctype> everything works perfectly . Seems like a bug to me.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    70
    Rep Power
    13
    I always thought that <!DOCTYPE needs to be the first thing on the page...so putting a comment before it is the same as removing it.
    Jan.

    N24 - ALL the newspapers on ONE site.
    JMailbox - Free Web Based Email Client.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Switzerland
    Posts
    64
    Rep Power
    14
    Oh. Now that's bad. Thank you for that hint.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Switzerland
    Posts
    64
    Rep Power
    14

    For everybody who cares:


    With the new DOM that is used in IE6, there is no longer the "body" object. The scroll offset is found in the documentElement object.

    If no doctype is specified, IE is in compatibility mode and thus the
    body object is available.

    Whatever mode is active, the currently unused scroll offset is always zero, so adding them both results in code that works in any mode:

    Code:
    scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
  14. #8
  15. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2001
    Posts
    28
    Rep Power
    0
    the reason your little bit of javascript works when there is NO doctype is that IE 6 supports "doctype switching."

    IE 6 Win, IE 5 Mac and Netscape 6 / Mozilla all support doctype switching, which is deciding how to render a page based on what doctype is given.

    if you do not give IE a doctype, it uses "quirks" mode, which lets you use document.body in your JS. IE 6 renders a page without a doctype the way IE 5 would (which means, among other things, improper box model).

    with the doctype you were giving IE, it was rendering the page using "standards" mode, which means standard ECMAScript, which is why your script would not work.

    http://gutfeldt.ch/matthias/articles/summarytable.html

    this is a nice summary of the various browsers and what affects different doctypes have on them.

IMN logo majestic logo threadwatch logo seochat tools logo