If you haven't met previously, let me introduce you two...

Maybe you've been designing websites for a month. Or maybe you've been at it for years. You've been using CSS for presentational markup with HTML, and you know how reliably pages tend to display when using a modern, standards-compliant browser like Firefox or Safari. And then you view your layout in the dreaded Internet Explorer 6. It's blown to bits, kablooey, gobbledygook. You followed all the rules, but everything is misaligned, your margins are blown, your em-based font sizes are way off...

A brief primer

IE6 has the largest install base of any browser in the market, and many people still haven't upgraded to Internet Explorer 7 (IE7). Many of the CSS hacks used to control IE6 are ignored by or disrupt browser rendering in IE7. IE7 plays by a lot of the standards-based rules we're accustomed to in modern browsers, but it still comes up short. And in many situations, you can't leave the users of older browsers completely in the lurch (even if IE6 is 8 friggin' years old).

In the immortal words of the terrorist Howard Payne from the movie (SPEED), "Pop quiz[...] What do you do?"

You hack that sucker.

You go to A List Apart or Position is Everything, and you hack that sucker until it submits to your will. You pull out all the stops. And then... You open the page in IE7 and once again it looks nothing at all like it's supposed to. Not even like your hacked-for-IE6 version does. Now what?

My new go-to: Conditional CSS comments. They certainly aren't new. However, for various projects including this site, I have just started using them. I love them and I probably won't stop unless there is a significantly compelling reason to not use them. In principle, we shouldn't have to at all, but that is not the reality we are confronted with, and it turn we must confront said reality with a solution that won't induce hair pulling...

So what are these conditional comments? They're basically proprietary filters built into various Internet Explorers that supply IE with specific stylesheets exclusively. Other browsers completely ignored that code, so the comments themselves are not (as far as I've read) harmful from an accessibility standpoint. You can even pick and choose specific versions of IE you want to target with your conditional comments. And what do these conditional CSS comments look like? Here is a stellar example from Ask the CSS Guy.

Before you go repeatedly recopying all your CSS after you make trivial tweaks to your base style sheet, and then pasting said changes back into your conditional CSS (like I was initially doing), know that the only CSS you absolutely need to put in the conditional style sheets are the rules you want overridden. Separate the wheat from the chaff and only maintain browser-specific hacks in your conditional CSS (you know, the code that tends to be troublesome with the usual suspects).

For tff4.com, I now use conditional CSS to serve up GIFs to IE6 users instead of my pretty, drop-shadowy PNGs. Now there's no need for crippled Javascript to make alpha channels render on your PNGs in IE6--just serve them slightly different CSS! (If you aren't excited by this prospect, you're not a web geek, mkay?)

Update: It's worth mentioning (due to a lot of traffic from Unmatched Style) that since I've just started using this technique of serving up different style sheets, I haven't had the chance to get everything perfect in every browser, with IE6 still receiving the least amount of attention. The archived pages, I know, are way off for the time being. Hope to get them fixed soon!