Browser Tip:
Getting Strict With Explorer 6

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

More than a few Web designers were puzzled when their carefully-designed pages that looked great in Explorer 5.5 fell completely apart when viewed with Explorer 6. That's because Explorer 6 completely supports all the properties, values, and features defined in the CSS 1 specification. The change greatly reduced browser compatibility problems between Explorer, Netscape, Opera, and Mozilla.

Tom Dahm first wrote about this when he warned subscribers about "New Headaches With IE6." And there are quite a few headaches - but also some opportunities that are just too good to pass up. IE 6 has been out for quite a while. It's time to get up to speed if you haven't already!

Compliance In "Strict" Mode

If your pages look fine in Explorer, it may be that you've created an error-free page. Congratulations! Or it may be that you've declared a DOCTYPE that puts the browser in "Transitional" or other mode. The Explorer 6 changes only apply to documents that render in "Strict" mode.

Make sure you have your DOCTYPE declared correctly if you want to take advantage of all the new features: Microsoft's Web site notes that:

"To allow for creation of new DTDs, such as HiDad 11.22, standards-compliant mode is switched on then the !DOCTYPE declaration is not recognized. Standards-compliant mode is also switched on when you specify a version of HTML that is not listed in the table, such as HTML 1. or HTML 3.22"

The Microsoft Web site has a complete discussion of the DOCTYPE declaration and changes to Explorer 6 in a 14-page online article by Lance Silver: CSS Enhancements in Internet Explorer 6. In this NetMechanic article, we're highlighting the most important changes and illustrating how the changes may affect your Web pages.

Correct These Errors For "Strict" Mode

If you became accustomed to writing sloppy CSS style rules, confident that Explorer would display them anyway, you're in for a shock in Explorer 6's "Strict" mode. Errors that used to be ignored may now cause the browser to ignore the style rule completely.

Think of the display problems that may cause! Here's a list to help you debug your style sheets if you're having Explorer 6 display problems:

Even if you make no other changes, consider eliminating any classes or IDs that begin with numbers and use the correct CLASS and ID names when you apply them. Those two browser display issues can cause a lot of wasted debugging time!

For more about CSS and browser-display problems, refer to our previous Webmaster Tip: Netscape Ate My Stylesheets!

Here's a sample style rule that breaks the new rules listed above and notes the problems:

<style type="text/css">
  .p
    {
    font:18; (no unit of measure and no font-family)
    background-color:"red"; (quotes around the one-word value)
    color:E6E4ED; (no beginning "#")
    border:solid Purple;
    border-width:5; (no unit of measure)
    height:50px;
    width:160; (no unit of measure)
    padding:10px;
    }
	
  .1sPecial (begins with a number)
    {
    font-family:verdana; (no font-size noted)
    }	
</style>

Here's the HTML code where we apply the style rules. Note the difference between the "1sPecial" class defined and the "1special" class that's actually applied inside the tag:

<p>Sample text with CSS applied</p>
<p class="1special">This text is Verdana.</p>

Here's an example of text displayed in Explorer 6's "Transitional" mode that contains errors explained in 1-7 of the list above:

Here's how that text displays in Explorer 6's "Strict" rendering mode:

And just for fun, here's how that same text displays in Netscape 6 in "Strict" mode:

Netscape also recognizes the difference between "Strict" and "Transitional" modes. In the image below, note how the browser correctly displays the border, height, and padding definitions in "Transitional" mode because those property values don't have errors. It also applies the text color and width - even though there are small errors in those rules:

See the difference? Explorer 5.5 ignores errors in "Strict" mode. But those same errors break the layout in Netscape and Explorer 6. When you correct the errors, all browsers display the text mostly like you expect - in either "Strict" or "Transitional" mode. Remember: no two browsers are exactly alike!

Box Model Changes Make Layout Easier

Exasperated? Maybe now you're considering just declaring a "Transitional" DOCTYPE and avoiding the issue for as long as you can.

We don't blame you. But please reconsider. If you leave the CSS errors, you'll still have some display problems in Netscape, Opera, and more standards-compliant browsers. Also, a "Transitional" DOCTYPE means you can't take advantage of Explorer 6's different application of the CSS box model.

Yes! Explorer 6 calculates the box model size according to CSS1 specifications. This means that you'll get a more uniform display result between browsers. Previously, Explorer included the border and padding values when calculating the size of a page element. Other browsers that followed the CSS1 specification did not include those values.

Consider the dimensions of this page element:

According to CSS1, the element's display dimensions should be 25 pixels by 150 pixels. But previous versions of Explorer would display it as 39 pixels by 164 pixels because it would add 5 pixels of padding on all four sides and 2 pixels of border.

Adding even a few pixels to a tight layout can cause problems and drive Web designers absolutely crazy until they figured out the problem was the browser, NOT their code! This change can make your design and debugging job much easier, so take advantage of it.

Browser display problems are an annoyance that consume huge chunks of developers' time. Finding them is almost as hard as fixing them because of the large number of browsers, browser versions, operating systems, and screen resolutions possible.

Let Browser Photo do that work for you. You'll see actual screen shots of your Web page display in 16 different popular combinations. Browser Photo helps you concentrate on correcting problems instead of spending your valuable time identifying them.