If you've been following our debug and validate method described in the chapter, then for all intents and purposes, your layout should look pretty spot-on between both the browsers.
In the vast majority of cases, it will be IE that doesn't render your CSS correctly. Common issues include:
- Box model problems: IE can calculate the size of block elements differently from other browsers. In most browsers, the total space taken up by an element is the sum of its width and height plus the width and height of its margins and padding. However, IE6, 7, and 8 will sometimes calculate the space taken up by an element differently, including its padding in the width defined by the width property, and so deducting this from the total space taken up by the element, as you can see in the following diagram:
- The hasLayout model: In IE6 and 7,
hasLayoutis a property that must be assigned to elements for them to be rendered correctly. In some cases, you'll need to add extra styling to triggerhasLayoutin IE. - Float problems: IE6 and 7 sometimes drop elements which should be floated next to each other, due to the way their width is calculated.
- List spacing problems: IE6 will sometimes add white space between list items—a pain if you're styling lists as boxes next to each other for navigation.
- The peekaboo bug: In IE6 and 7, this bug causes floated elements to disappear seemingly at random.
- The guillotine bug: This bug makes elements, floated next to each other, change height when the user hovers their mouse over one of them.
Fortunately, there is a fix (or often more than one fix) for each of these bugs. For a comprehensive guide to the bugs and how to fix them, refer to The CSS Detective by Denise R. Jacobs, published by New Riders (http://cssdetectiveguide.com).
If IE is causing you problems which you can't fix by making tweaks to your main stylesheet, then it's time for some hacks.
The neatest way to do this is to create two stylesheets for your theme—one for general browser use and one for IE browsers, and let each browser call them in.
This isn't as bad as it seems. The bulk of your CSS can stay in your main CSS file; you'll then call in the following specific IE stylesheet code, which will load additionally only if the browser is IE.
In the IE stylesheet, you'll duplicate the rules and correct the properties that were not looking correct in IE. Because this stylesheet will load in underneath your main stylesheet, any duplicated rules will overwrite the original rules in your first stylesheet.