CSS (Cascading Style Sheets) seems like the answer to your Web-design prayers—until you test your layout in a couple of browsers and see chaotic pages that bear little resemblance to your creation. But you can have your CSS and cross-browser compatibility, too. Creating pages that display well in many browsers often requires—instead of following the letter of the CSS law—outsmarting those browsers’ display quirks.
Microsoft Internet Explorer for Windows
Windows Internet Explorer (IE) dominates the Web-browser market. The majority of Web surfers use IE 6, but version 5 for Windows (Win IE 5) is still common. Win IE 5 exhibits many strange display behaviors that you can overcome with clever tricks.
Box-Model Muddle The most significant bug in Win IE 5 affects its understanding of the CSS box model. CSS treats any piece of content on a page, whether it’s a paragraph of text or a graphic, as a box. Each of the four edges of the box may have various properties, such as a margin that separates the box’s content from content around it, a border that adds a colorful line around the content, and padding that adds space between the content and its border.
According to CSS, the total width of any box element is equal to the total width of all components of the box: the total amount of the box’s width property, left and right margins, left and right borders, and left and right padding.
Say you’re creating a sidebar element to display your site’s navigation buttons. In the style used to format this sidebar, you set the width to 150 pixels and add 15 pixels of margin, a 1-pixel border, and 10 pixels of padding. In CSS math, that’s 150 + 30 (for the margins) + 2 (for the 1-pixel border on the left and right edges) + 20 (for the padding on both sides), or 202 pixels. So most browsers will give this sidebar element 202 pixels of space on the page.
Win IE 5 takes a different approach. Rather than allotting 150 pixels to your content and then adding the widths of other elements, Win IE 5 makes the entire box 150 pixels wide—leaving only 98 pixels for the actual content. This same bug affects Win IE 6 in quirks-mode (see “Get It Right from the Start”).
To get around this bug, use a simple hack that tricks the browser into using a different width. First, determine what width Win IE 5 needs to get it right. (In our example, that’s 202 pixels.) Then add a Win IE 5-only style to your style sheet:
.sidebar { /*this is the style for other browsers*/
border: 1px solid black;
width: 150px;
margin: 15px;
padding: 10px;
}
* html .sidebar {
width: 202px; /* trick IE5 Win */
width: 150px; /* reset width for IE5 Mac and IE6 */
}
The first style is understood by most browsers, while the second style is a trick.
The first declaration in the second style sets the width to 202 pixels, but since it also affects Mac IE 5 and Win IE 6, you need one more hack to steer those browsers back on course. The second declaration isn’t a typo:
width: 150pxreturns the width to the correct value for Mac IE 5 and Win IE 6 (but not Win IE 5).
This hack points out that the best defense can be a good offense. You’ll often find that your designs behave well in all browsers except Internet Explorer. In these cases, use the
* htmlhack to feed different values to IE. The order in which you write your styles is important. If the order were reversed in the preceding example, the hack wouldn’t work.
Float Failure Try to indent a float (an element that aligns to the left or right and allows other content to flow around it), and you’ll discover that Win IE doubles the size of this indent. Say you create a style for pull quotes that appear within the text of an article. You want each pull quote to align to the right side of the Web-browser window, but you want to indent it 15 pixels from the edge of the window so it doesn’t touch the edge. You could create this style:
.pullquote {
float: right;
width: 150px;
margin-right: 15px;
}
Unfortunately, Win IE doubles this margin. When the margin is relatively large, such as 50 pixels, or the page layout is very precise, the added space can ruin your design. Fortunately, the answer is simple—just add
display: inlineto the float style:
.pullquote {
float: right;
width: 150px;
margin-right: 15px;
display: inline;
}
Every other current browser ignores this nonsense code.
Microsoft Internet Explorer for Mac
Mac IE 5 doesn’t suffer from the same bugs that afflict its Windows counterparts. It does, however, understand the
* htmlhack. Here’s how to hide the hack so Mac IE will see only the correct CSS styles:
/* hide from Mac IE */
* html .sidebar {
margin-right: -3px; /* trick IE Win */
}
/* stop hiding from Mac IE */
The secret here is the use of the CSS comments. The first line of code contains a CSS comment with an unusual addition, the single forward slash before the final comment code:
*/. This single forward slash blinds Mac IE CSS code until it encounters another CSS comment (the last line in the code).
Smarter CSS
You can’t control which browsers your site visitors use, and you can’t make those browsers display code in the same way. But with these tricks for overcoming cross-platform CSS incompatibilities, your designs will survive.
[ David Sawyer McFarland is a Web developer and the author of Dreamweaver MX 2004: The Missing Manual (O’Reilly, 2004). ]
Sidebar: Get It Right From the Start
Although CSS gets all the attention, HTML is still the foundation of any Web page. Every page should begin with the proper doctype, or document-type declaration. Many Web browsers change the way they display a page based on the doctype. For example, without a proper doctype, Win IE 6 falls into what’s called quirks-mode, abandoning the correct display of CSS in favor of the quirky behavior of earlier Microsoft browsers.
The doctype you should use depends on the kind of HTML you write. The most common types now are HTML 4.01 and XHTML. For HTML 4.01, begin the HTML page with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or/TR/html4/loose.dtd">
XHTML documents require this doctype:
<DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
There are several flavors of doctypes for handling frame sets and for accommodating stricter HTML rules. You can see a complete list and information at the W3C Web site.
The doctype declaration must appear as the first line of a Web page; if you include just one space before the doctype, some browsers revert to quirks-mode.
Display problems can also occur if you’ve made a mistake in your HTML. To make sure that your code is correct, run it through the W3C Markup Validation Service. Apple also has instructions for installing the validator on your computer.
Omitting just a single line of code—in this case a proper document-type declaration—can make this solid CSS design…… lose its balance in Microsoft Internet Explorer 6 for Windows.
