I’ve been working on a Wordpress.com blog for someone for which the “edit the CSS” upgrade has been purchased, and all has gone swell so far with tweaking the Kubrick theme. A couple !important declarations needed, but no big deal. That is, of course, until “make it work in IE6” time came along.

Normally I’d just include a conditional comment, something seen by most developers to be a best practice, but in this case we can’t modify the php template files, so I had to break out the CSS hacks that I thought I had said goodbye to a few years ago.

There are several ways to go about this. First, I tried these tips from Ed Eliot, using the underscore trick to target just IE6. But interestingly (and perhaps unsurprisingly) Wordpress.com apparently won’t let you save any code that isn’t valid. I had it confirmed by support that my _margin-top: -200px; wouldn’t work.

After briefly considering @importing another stylesheet, I instead went with the CSS2 child selector approach outlined in a 24ways article from 2005. Basically, since IE6 doesn’t support the child selector ‘>’, you can make one declaration for IE6 then another for more advanced browsers using the child selector. E.g.

#content { /* for IE6 */
   margin-top: -200px;
}
#page > #content { /* for other browsers, incl. IE7+ */
   margin-top: 40px;
}

This might not get you all the mileage you need, but will probably help.