CSS Troubleshooting

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: 150px

returns 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

* html

hack 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: inline

to 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

* html

hack. 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). ]