When I’m translating a design to markup I can usually get it to look the same in all the major browsers without too much trouble, but every once in awhile there’s a problem with IE6 that I can’t figure out, or just don’t have the time/energy to deal with the right way. In the past I’ve used the underscore hack to target a specific property to IE6, but the problem with that is that it isn’t valid CSS. Recently I found a way to avoid CSS hacks and get the same results with valid CSS. Instead of using the underscore, it uses child selectors, which are valid, but IE6 doesn’t support.

For example, I had a design where one element had to line up perfectly with another, and it was working fine in Firefox/Safari/IE7, but in IE6 it was 3 pixels off, so I did this:

#childElement /* This is the element I want to position */
{
    position: relative;
    left: 113px; /* This targets all browsers, including IE6 */
}

#parentElement > #childElement
{
    left: 116px; /* This targets only Firefox/Safari/IE7. IE6 doesn't support it, so it uses the value above, but the others will use this one instead */
}