1. Technology
Send to a Friend via Email

Internet Explorer 6 DOCTYPE Bug

Join the Discussion

Questions? Comments?

Microsoft should be ashamed of themselves for not knowing what a DOCTYPE is.

A DOCTYPE defines the version of the HTML standards that has been followed in the coding of the HTML contained within the web page. Of course most if not all current web browsers ignore the DOCTYPE and parse the page based on their own predefined rules rather than the rules defined in the DOCTYPE. That is a problem that all current browsers share which presumably will be fixed in not too far distant future versions of the browsers.

A DOCTYPE is also used by validators to determine whether the HTML coded in the page follows the defined standard or not.

That should be all that the DOCTYPE is used for - to define what HTML is valide and to validate it. A DOCTYPE should not have any effect whatsoever on the Javascript that you code in your web page.

Unfortunately due to the people at Microsoft not knowing what a DOCTYPE is for the Javascript code that you need to use with your page is affected by the DOCTYPE that you use to define the page even though the DOCTYPE has nothing to do with Javascript.

The problem arises because there are several different ways to refer to some parts of the Document Object Model as it relates to the page (eg. in determining scroll position). The standards say that you should refer to these parts of the DOM using document.documentElement but the traditional Microsoft way of accessing the same fields is using document.body. Of course other browsers used other non-standard ways to retrieve the same information but many had adopted the Microsoft way even before the standard way was developed.

The latest versions of the various browsers that supported document.body now also support accessing the fields using document.documentElement as well. They support both methods of accessing the information while older browsers only support the older method which would make the older way the obvious way to code the references if it wasn't for Microsoft. For no reason whatever (other than - I assume - to make life difficult for Javascript programmers) Microsoft decided that instead of having IE6 populate both versions of the fields that it would populate one or the other depending on part of the DOCTYPE definition in the page (if any). Of course the DOCTYPE is selected to match the HTML coding standard required for the page but Microsoft decided that if you choose a Strict DOCTYPE that you must obtain the values from document.documentElement while if you choose a Transitional DOCTYPE or have no DOCTYPE at all that you must use document.body. Why they couldn't just populate both sets of fields like the other browsers do is anyone's guess. Having made the decision to only populate one set of fields they chose something completely unrelated to test for in order to decide which fields to populate.

So what does this mean for our Javascript coding? Well, if you don't use DOCTYPEs or use a Transitional DOCTYPE then you don't need to worry about document.documentElement and can keep using document.body. So (for example) to be able to determine how far down the page your visitor has scrolled you can use:

document.body.scrollTop

If you use a Strict DOCTYPE you need to test both versions of a field in order to have get the values from document.documentElement in IE6 and from document.body in IE5 and other older browsers. Of course it doesn't matter which of the two fields we get in other modern browsers since they populate both sets of fields with the same values (the way Microsoft should have done). The simplest way to do this is to replace each reference with code that will substitute whichever of the two fields has been populated with a value. For the scrollTop field the simplest code to do this is:

document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop

If you are using someone else's Javascript and you use a Strict DOCTYPE and they didn't then they may not have taken this IE6 bug into account and the script as supplied may not work as expected. If this happens to you then you just need to find all of the document.body references in the script and alter the code as I showed above for the scrollTop field in order to get the script to work around Microsoft's IE6 bug.

See More About
Related Video
Windows Movie Maker Capture

©2014 About.com. All rights reserved.