How I debug CSS in IE6

I make my living as a Front-end Web Developer, which means I spend quite a bit of time making websites look as good in Internet Explorer 6 (IE6) as they do in other browsers. It isn’t rocket science and I’ve honed my technique to make bug fixing as quick and easy as possible.

Prevention is better than a cure

If I have to spend a long time debugging IE6, it’s likely it’s because I’m fixing someone else’s code. There are certain procedures you can undertake when writing your CSS which will make sure IE6 headaches are kept to an absolute minimum and unfortunately, not everyone knows about them.

Rule 1: Reset those default styles

Prior to resetting styles, I used to get all kinds of problems cross-browsers with IE and Firefox. I started off using this:

*{
margin: 0;
padding: 0;
}

before moving on to the YUI reset and then finally settling on Eric Meyer’s Reset.

Rule 2: Don’t declare margin/padding and width on the same item

You must have been living under a rock, if you don’t know about IE6’s crappy box model. If you need to set a width on an item try not to set a margin/padding (on the left or right) on it too. I get round this by declaring padding/margin (depending on the design) to my <p>,<ul>,<table>,<hr> , etc elements.

In most cases, a designer will set the same guttering on all text on a page – anywhere from 8px to 20px (but often 10px) so:

p{
padding: 0 10px;
}

is often a great trick. Side note: I’ll always use pixels for the left/right margins/padding because as soon as you start to use ems, you can get discrepancies when you have items in the same <div> with differing fonts sizes.

Rule 3: Use valid XHTML/HTML

I’ve lost count of the times, when I’ve struggled with a layout that looks perfect in Firefox/Safari but awful in IE6. If it also looks crappy in IE7 then more often than not the HTML will be invalid with a > or a < missing. For some reason, the other browsers allow this kind of thing to go by unpunished but IE is a stickler for the rules.

I use the HTML validator Add-on for Firefox to let me know if my pages are valid.

Rule 4: Float nearly everything

When I write CSS I make sure virtually all my elements are floated – this works fantastically provided designs are of a fixed width – if they’re not a fixed width (they should be – but let’s not get into that) then you’ll need to use the clearfix solution (a lot) because if an item is floated and its parent element isn’t floated too, the parent element will forget its responsibility to be at least long as its child elements.

Debugging

I have over 3 years of IE6+CSS experience so I’ve seen most problems – and instinctively I know how to fix most issues I stumble across, but there are times when I can’t fathom what’s wrong. When that happens here’s what I do:

• Load up Windows XP in VMware Fusion (OS X) which is better than Parallels (in my opinion)
• Load up Internet Explorer 6
• Make sure the IE Accessibility Toolbar is installed
• Use the Edit CSS option in the toolbar
• Then I start the ‘magic’

Trial and error

More often than not, problems in IE6 are caused by the width of items. An item one pixel too wide will knock columns underneath each other, but it can be hard to work out which element is causing the extra width.

Background colours

I’ll often set a background colour on major structural elements

#content{background-color: red;}
#sidebar{background-color:blue;}

This lets me see which element is causing the problem.

Hide elements

Then I’ll start to hide elements, starting with the biggest surrounding <div> and working my way in. So if I start with:

#sidebar{display: none;}

the problem should vanish (along with most the of the page) but does the problem still go away if I try the following?

#sidebar .sub-item{display: none;}

or

#sidebar .sub-item .sub-sub-item{display: none;}

Using this method I can establish which item is causing the problem. Often it may be a <div>, a <p>, or another item nested several layers deep.

Checking for solutions

IE6 is an outlaw; it often invents its own rules by which to render CSS. Once I’ve discovered a problem element, there is often no rhyme or reason why it is causing a problem so I’ll try the following rules:

#sidebar .sub-item .sub-subitem{
position: relative; /* try setting this if it's not already set - it sometimes works wonders */
display: inline; /* display: inline often fixes the double margin float bug and */
display: inline-block; /* Sometimes this just fixes problems - no idea why */
margin: 0; /* margin can be a killer so take it off completely see if the problem goes away */
padding: 0; /* same as margin */
background-color: transparent; /* Sometimes IE6 hates background colours not being declared */
overflow: hidden; /* can sometimes stop columns too wide from breaking a layout */
zoom: 1; /* Sometimes forces hasLayout and fixes things */
}

I’ll often experiment with a few of these different rules with margin or display being my most popular problem solvers. I’ll also check Google for answers to see if anyone else on the web has encountered a random bug.

Fixing

Once I have my solutions I’ll put them in a separate stylesheet often called ie6.css and include it onto a page with a conditional comment. Making sure it is the last stylesheet imported/linked on the page. This is better than putting your fixing in with the rest of your CSS as it allows you to manage it better – that’s my opinion anyway.

Summary

That’s how I debug CSS in IE6. Do you have a similar method?