|
HTML Tip:
New Headaches with IE 6
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Of all the changes to IE 6, perhaps the most important for Webmasters is the addition of dual CSS rendering engines. While this new feature helps Internet Explorer comply with the W3C HTML standards, it may also break your existing Web pages.
To see how, take a look at two pages on our test Web site. We've used Browser Photo to create a screen shot of each page as viewed with IE 6.
These pages are identical, except for one line of HTML code that tells IE 6 whether it should use its "classic" rendering engine, or the new standards-compliant rendering engine. Page 1 uses the classic rendering engine and displays the way we intended. Page 2 uses the standards-compliant engine, and doesn't render the page anything like we'd intended.
Why? The new rendering engine changes the rules for writing style sheets so that some things that were permitted in the past are now illegal. In our example, there are three specific rules that we've violated. These minor errors were forgiven by older versions of Internet Explorer and by IE 6 when it uses its classic rendering engine, but the new rendering engine isn't so generous.
This switch between the new and classic rendering engines is triggered by a single line of HTML code known as your Document Type Definition, or DTD.
Officially, every one of your Web pages should begin with a DOCTYPE tag. This tells the browser exactly which version of the HTML standards to use when interpreting your page. The DOCTYPE tag is one of the more arcane parts of the HTML language. Understanding exactly how to write a DOCTYPE can be a real chore.
In practice, you can build a Web page without specifying a DOCTYPE tag. However, many conscientious HTML coders include it, and many HTML editors will automatically insert it into your pages.
IE 6 uses the DOCTYPE tag to decide which rendering engine to use. If your page doesn't use a DOCTYPE, then IE 6 will use its classic engine. Also, if you use a DOCTYPE that includes the words "Transitional," then IE 6 will usually use the classic engine. That's the way Page 1 is written, using this DOCTYPE tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
However, if your DOCTYPE tag includes the words "Transitional" and gives a URL where the DTD can be found, then IE 6 will instead switch to the new rendering engine. So this version of the tag will use the new engine:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Likewise, if your DOCTYPE doesn't include the word "Transitional" or includes the word "Strict," then IE 6 will use the new rendering engine. So either of these DOCTYPE tags will trigger the new rendering engine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
Are you confused yet? You should be - the rules for the DOCTYPE switch are complex. To see a full explanation of them, check Microsoft's site for details.
By now you may be asking why in the world Microsoft decided to introduce such a complex feature. Why introduce something that will undoubtedly break a lot of Web sites?
In truth, with the introduction of its dual rendering engines, Microsoft is trying to play by the rules, and do so in a way that minimizes the disruption to Webmasters.
In the past Microsoft and Netscape have both been criticized for not complying with the W3C HTML standards. During the height of the Browser Wars, both companies introduced proprietary HTML tags in an effort to dominate the browser market. That created major headaches for Web Designers who have to decide which HTML tags work under which browser.
Those headaches still remain, and are the main reason for testing your pages for Browser Compatibility with a tool like our HTML Toolbox.
In recent years, though, both companies have tried to move closer to the official HTML standards. For its part, Netscape completely rewrote Version 6 of their browser to be more standards complaint. But in doing that, they introduced other major problems for Webmasters by ignoring backward compatibility. Many Web pages that worked just fine under earlier versions of Netscape Navigator were suddenly broken under Version 6. That's especially true for pages that used Dynamic HTML. In an effort to play by the rules, Netscape made life worse for Webmasters.
With the introduction of IE 6, Microsoft is likewise trying to move closer to standards compliance. The main difference is that Microsoft has made the change with an eye toward backward compatibility. By allowing you to use the DOCTYPE tag, you can control whether the browser works the old way or the new way.
We've violated three specific rules for creating Style Sheets. These violations are forgiven by older versions of both Internet Explorer and Netscape Navigator, but Version 6 of both browsers strictly enforces the rules.
That's an important point, since you may be tempted to dodge errors like those on our
demo page by forcing Internet Explorer to use the classic engine.
You can try that, but your pages will still be broken under Version 6 of Netscape.
Problems like this illustrate why you need to test your pages using all major browser and computer types. Just
because you've fixed the problem under one browser doesn't mean you're safe.
So how exactly does our demo page violate the rules for the new rendering engine? Space doesn't allow us to cover our violations in this issue. In future issues, we'll cover each specific error and show you how to avoid it.
|
