I use PNG-24s and even like to use them with rollovers because they look really sharp with their nice transparency and lossless quality. Damn you IE 6 for not supporting them. It is stupid not to use PNGs just because IE 6 doesn’t support them. That doesn’t mean you should be satisfied with that gray background behind your images in IE 6. Those users shouldn’t be stuck with such terrible looking graphics. I have 2 quick and basic strategies for making IE 6 users happier (and another trick to knock their heads straight).

1. Use jQuery pngFix

It is way too easy to use jquery.pngFix.js. You can use it with $(document) to try and fix everything or you can use other jQuery selectors to get the job done for only a couple elements. Don’t feel bad about using the document selector because this code won’t affect any normal web browsers. It will only slow down IE 6 a bit more, but do you really care? The browser is already painfully slow, and we can only assume the poor user is used to it by now. I know it is hard, but you can just stop arguing about efficiency for a second and save yourself some work by using that slow document selector.

2. Use Conditional Stylesheets

You should also probably use a ie6.css stylesheet via a conditional comment in your header like this:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->


If you have rollover PNGs (like I do with my top navigation), you will notice that the pngFix doesn’t work for the regular rollover technique (using PNG sprites). For those things, I basically use one of two techniques. The first and easier one is to replace the background PNG image with a GIF or JPEG image. Yes, IE 6 supports GIF transparency (even as sprites! wow!) but every designer knows it is not even comparable to PNG-24’s transparency. On my main website, I just loaded up the PNG for my navigation in Photoshop and added a solid blue to the background. I saved it as a GIF and added 2 lines of CSS for those IE 6 users (yes we are making their experience slower by adding extra images). On this blog I used a different approach. I stripped the background image of the navigation and set the CSS to show the text (I also had to do it for my portfolio “Visit Site” buttons). You can apply any CSS styles you want, but make sure you load ie6.css after you load your other stylesheets so that it overwrites any previous rules. I stripped a bunch of graphic goodies from the blog and changed some basic styles just because I didn’t feel like spending the time to correct all the float/margin/padding issues with backgrounds and things. I think that is an acceptable approach as it provides a better experience for those users (no more out of place float objects!). Sadly it just doesn’t look as cool, and that’s a nightmare when you are a designer. Someone is missing out on our art.

Optional: Save Their Souls

Convince your user to upgrade, even if it means doing so by evil deceptive methods. Place some kind of a sweet upgrade suggestion to get all those IE 6 people into the 21st century. I happen to really like this nifty little warning that the guys over at Done21 cooked up (again using some jQuery power).

To Sum It Up

IE 6 is terrible, but making your website function in IE 6 is a necessary evil. Make it work, but inform your users they should know better than to come around your cool site with that clunker of a browser. We know IE 6 is cramping the web’s style right now. We also know supporting IE 6 sucks, but understand that to call your site accessible it is absolutely necessary to make sure it functions and looks acceptable in IE 6 until there is no one using it.