DOCTYPE and Page Blurring
We recently had to track down a problem where text and images were appearing smeared under certain circumstances in Internet Explorer. The smearing happened in a frame when the the content in the frame is scrolled vertically.
After much experimentation, we discovered that removing the DOCTYPE on the page corrected the problem. There’s almost no documentation of this problem on the web, so I wanted to get this information up here in case anyone needs a fix for this issue.
Also, this is a good opportunity to discuss DOCTYPE and what it means.
Document Type Declaration (DOCTYPE) specifies to what standard the html markup on your page conforms. As non-standard ways of writing html are being deprecated, adding a DOCTYPE header to your html pages allows you to use automated validation tools to test how strictly your page complies with web standards.
Other than markup validation, the most pervasive effect of DOCTYPE involves maintaining backwards compatability with pages designed for older browsers. Many (if not most) of these pages were created before web standards became widely followed and before Internet Explorer had much competition in the browser world.
In versions of Internet Explorer prior to version 6, bugs were present that caused content in pages to display differently than was specified in web standards and differently than in other competing browsers. Because IE had such a monopoly on the browser market at the time, web designers tended to test their pages only in IE and their designs were necessarily dependent on the (improper) rendering these bugs caused.
When Microsoft released IE6, which corrected many of these bugs, they knew that millions of web pages designed around the buggy versions of their browser would now break in IE6. To combat this, IE6 included two rendering modes - standards compliant mode and “Quirks” mode.
In a nutshell, Quirks mode is the rendering mode that included the pre-IE6 bugs and standards mode is the modern web standards rendering. But, Microsoft needed a way to determine in which mode to display a website as each was incompatable with the other.
They settled on DOCTYPE. As DOCTYPE is used to declare to which web standard a page should be validated against, Microsoft assumed that web designers who included a DOCTYPE would be following more modern design practices and therefore their pages could safely be displayed in web standards mode.
For those pages without a DOCTYPE, it could be assumed that they are either legacy pages from before web standards became widely followed (and therefore reliant on the “quirky” behavior of older browsers) or created by designers who were following older design practices and also likely reliant on these bugs.
So, include a DOCTYPE (of any kind) and trigger standards mode or leave one out and trigger Quirks mode.
Somehow, something in IE standards mode (before IE7, display is normal in IE7) triggers this page blurring effect…any ideas?