IE6 specific CSS

When Internet Explorer 7 came out it was a huge disappointment to many web designers. It’s still littered with bugs and quirks, but a lot of things that were not recognized in IE6 are fixed in 7. This adds even more problems to the mix, because now we have to code for two bad browsers and IE6 still represents a huge chunk of users. With email design you also have to remember that many email programs render like IE6 or even use the IE6 engine.

Always standards compliant

I always like to write standards compliant code whenever I can, with email it’s not even an option. With web, unless you are working with someone else’s mess it should always be standards compliant, but what happens when something won’t work in IE6 but does in IE7. It could be a double margin float bug, or the 3 pixel gap bug. Ideally you should try not to work yourself into a situation where these bugs crop up, but usually by the time they have it’s too late.

CSS that IE6 doesn’t understand

Okay, this tip means using redundancy, and I really like to avoid that, but sometimes you just have to make it work in the name of saving time and your sanity. The great thing is, although some may consider it a hack this will still be standards compliant.

Usually what happens is one attribute is throwing off IE6, while IE7, Firefox, Safari and Opera look fine. You are out of time, what do you do? Well, he’s a quick fix, use child selectors. I have used this method on my blog.

.panelLeft {
     padding:10px 0 10px 0;
}
#panels > .panelLeft {
     padding:10px 10px 10px 0;
}

So first we set the panelLeft class padding for everything. IE6 does not understand child selectors and ignores them, so for finer tuning we use a class selector that says the child class panelLeft of panels gets the same padding as the first declaration plus a right padding of 10 pixels. This right padding in my case was throwing off the entire layout in IE6. It’s only one example, I have used child selectors on several occasions. Sometimes absolute positioning will be totally off in IE6, this is another way you can use two positioning values.

Anytime you have CSS that is only breaking in IE6, you can track down what is causing the bug and use this method to set IE6 specific values. I hope this saves some people a bit of time and sanity.