Tutorial: Serve a PNG to anything but Internet Explorer using CSS

Whilst making the latest changes to the seemingly perpetual redesign of my portfolio / company site I became even more annoyed with the problem that Internet Explorer has with PNG files.

I am sure that this isn't news to anyone but for completeness sake the problem is that PNG images with alpha transparency have a shocking grey background in Windows versions of IE. This is because IE doesn't natively support alpha transparency.

Anyway, the new design looked good in anything apart from IE (Whats new?) and I remembered something that I had read about 6 months ago in the excellent Web Standards Solutions by Dan Cederholm.

In one of the chapters Mr.Cederholm explains that he serves a different logo to people viewing with styles and those that use styles:

One reason for swapping an image with another image would be to serve varying site logos - one for browsers that handle CSS properly (Referenced with the background property) and one thats served to old browsers, handheld devices, screen readers etc.

Dan goes on to show an example of serving a "lo-fi" and "hi-fi" logos using a form of image replacement.

This wasn't exactly what I was after as IE thinks it displays CSS properly and would substitute in the background image, thus defeating the object, but the principal was a good one.

What was needed was a way to use this method (swapping out an image and replacing it with a background image) that IE wouldn't be able to get it's mucky fingers on.

Enter the CSS child selector.

PPK over at Quirksmode.org explains child selectors much better than I can but basically IE doesn't understand them. And in true Microsoft style, anything they don't understand doesn't exist.

Therefore if we use child selectors in the CSS we can "Filter" out IE and only serve the PNG image to browsers which understand alpha transparency.

Put together what we have learned from Dan Cederholm and PPK and we have our solution. We can now serve a PNG to everything except IE using just CSS.

Check out the accompanying demonstration page and don't forget to view the source for the tutorial notes.

I Know that I am by no means breaking new gound here, but I just though I would try and promote this as a method as it wasn't easy to find anything that explained to me what I wanted to know. I guess this is why Simplified Standards will be such a hit when it launches in the near future.

I also know that this solution probably has things wrong with it (please let me know), what solution is perfect?, but it does the job quite well in a way that will be familiar to people who have used any popular image replacement technique.