CSS Adjustments for IE

For this particular page design, we need to address a few quirks in order for users of Internet Explorer to see things the way other, more standards-aware browsers do. For instance, if you look at our design in IE6/Win, you'll notice that the footer has a hard time properly clearing the two columns, with its background extending up into the content and sidebar (Figure 9.32).

Figure 9.32. The footer renders poorly in IE6/Win and thus calls for a small CSS fix.

Before we fix this problem, it's a perfect time to talk about hack managementthat is, keeping your CSS hacks separate from your clean, hack-free CSS that fully standards-aware browsers can enjoy.

HACK MANAGEMENT

There are several ways to keep things separate, and I highly recommend reading Molly Holzschlag's article, "Strategies for Long-Term CSS Hack Management" (www.informit.com/articles/article.asp?p=170511). In her article, Molly describes utilizing various CSS filters to send hacks to appropriate browsers only, by separating the hacks into different CSS files. These filtered files are downloaded only by the browsers they are intended for, thereby saving a small amount of bandwidth (which varies depending on the amount of hacks used) for browsers that don't need the hacks.

Another advantage here is that just as support for older browsers can be trimmed off, so too can the CSS hacks that support them. In other words, when the time is right for a site to stop catering to IE5/Win, for example, the designer can simply delete the CSS file that contains all the hacks specific to that browser, while the hack-free CSS file remains untouched. Future-proofing is at work here.

Another big plus in keeping your primary CSS files hack-free is that they are easier to wade though. When debugging and maintaining the stylesheets in the future, the hacks stay out of the way in separate files, making the hack-free CSS easier for us humans to read.

Quarantine your hacks

That said, at the very simplest, you could also quarantine all your IE CSS hacks to the end of the main style sheetwhich makes it convenient to trim them off at a later daterather than commingling the hacks in with the pure standards-based CSS. Or, similarly, you can put all hacks in a separate file that is referenced after the hack-free CSS. You won't gain the aforementioned bandwidth savings that filtering the separate hack files can bring, but this is usually a tiny amount.

So, hack management options are surely a good thing to investigate to keep your CSS nice and clean for the future. Regardless of where you put your hacks, let's now address the specific fixes we'll need for the Bulletproof Pretzel Company, starting with the footer.

FOOTER FIX

The simple fix for the clearing footer problem in IE/Win is the "Holly Hack," named for Holly Bergevin, who discovered it. Entire books could be filled with the explanations of CSS hacks and their related fixes, so quite simply, I'll just state that the following hack fixes the footer problem, where IE/Win needs the clearing element to have a specified dimension. The dimension is irrelevant, since IE/Win will always (wrongly) expand elements to fit whatever is inside them anyway, so we use height: 1%; to make IE/Win play nicely with our footer. We also want to hide this rule from IE5/Mac, because it implements the height value properly, where IE/Win does not..

 #footer {height: 1%; } 

Next, we hide this declaration from IE5/Mac by inserting a backslash prior to the end comment before the rule:

 /* Hide from IE5/Mac \*/ #footer {height: 1%; } /* End hide from IE5/Mac */ 

Then we target this declaration to IE/Win only, using the star HTML hack:

 /* Hide from IE5/Mac \*/ * html #footer {height: 1%; } /* End hide from IE5/Mac */ 

Finally, we add a comment at the end to make sure IE5/Mac is back on track with anything that follows this declaration.

As I mentioned earlier, entire books could be devoted to explaining hacks, but this one is so common, it's certainly worth mentioning here since it relates to our working example.

SELF-CLEARING FIX

I had mentioned earlier that the "self-clearing" method for clearing the floated image in the image/title/description block did not work in IE. Because IE doesn't support the :after pseudo-class, we need an alternate way of handling that for those browsers. Because we're keeping IE fixes and hacks separate from our clean CSS that we've previously written out, it makes sense to add the fix here.

For IE/Win, we need only apply the "Holly Hack" once again to the <dl> that contains the floated image. Adding a dimension (in this case an arbitrary one) forces IE/Win to clear the floats contained within. And again, we're hiding this rule from IE/Mac, which would correctly apply a height of 1%.

 /* Hide from IE/Mac \*/ * html dl.feature {height: 1%; } /* End hide from IE/Mac */ 

To play nicely with IE/Mac, we use a different approach and add the rule display: inline-table; which mysteriously forces the browser to clear floats contained within. We don't want other browsers to follow this rule, however, so we'll follow that by overriding within the "Hide from IE/Mac" section.

 dl.feature {display: inline-table; } /* Hides from IE-mac \*/ * html dl.feature {height: 1%; } dl.feature {display: block; } /* End hide from IE-mac */ 

This may sound confusing at first, but what's happening here is that IE/Mac sees display: inline-table;, so it's happy. Next, we send the "Holly Hack" to IE/Win browsers, hiding the rule from IE/Mac. Then finally, we override the previous display: inline-table; rule with display: block;this, too is hidden from IE/Mac so as not to override it for that particular browser.

When all is said and done, any floats within <dl > will be auto-cleared in all modern browsers. This mystical voodoo might seem complex at first, but as you start reusing a few of these hacks for common purposes, they become second nature. By quarantining these fixes into their section of the style sheet or a separate file altogether, you can later easily remove them and leave clean, standards-compliant CSS intact.