Neil Turner's Blog

Blogging about technology and randomness since 2002

PNG Transparency in IE

As well as its strange implentation of CSS, there’s another reason why I want to hit the developers of Internet Explorer – shoddy support for alpha-transparency in the PNG image file format.
For some of you, you’ll be thinking: “woah, what the?”. Basically, transparency allows you to specify part of the image as ‘transparent’, so that it will inherit the colour of whatever is behind it. The GIF format has a crude implementation of it – you can specify one of the colours to be ‘transparent’.
PNG is, as most web and graphical designers know, a much better format: better compression, support for more than 256 colours, and alpha-transparency. This effectively introduces a fourth colour channel (the other three being red, green and blue), so you can have varying levels of transparency. Sounds great?
Well, there’s one problem. Just about every browser under the sun supports it, except for IE for Windows. Not even IE6 likes it. Oh sure, it’ll display PNGs with basic transparency, but anything posh and it’ll look like the cat’s dinner. This wouldn’t be a problem if IE were a minority browser, but sadly most of the world is using it.
Fortunately, A List Apart comes to the rescue. All it takes is a little proprietary CSS and IE is happy as a kid with candy. Of course, the very fact you have to resort to this is more evidence of Microsoft’s disregard for standards, and even more shocking when you consider that it works in IE for Mac, and that MS implemented alpha transparency for the icon format to make their XP icons look nice.
If you want to see what I’m talking about, compare this PNG Alpha Mask Demo in IE with it in, well, take you pick: Netscape 6+, Opera 6+, Mozilla 1+, IE 5+ for Mac, OmniWeb 3.1, ICab 1.9, WebTV, and even the Sega Dreamcast.
A List Apart is a very nice resource, and is something that I’m going to have to bury my head in at some point. Even after reading just a few articles I’m learning a lot more about CSS and standards than I knew before.

3 Comments

  1. A List Apart is a good resource and I remember reading that article when it first came out but found thats a pretty extreme alternative to deal with IE. I’ve complained about Netscape for years but now it’s time to complain about the faults of IE.

  2. I didn’t know that alpha transparency was used with XP icons (although thinking about it, I could have guessed). I don’t understand why microsoft would want to perpetuate this policy. Transparent pngs are great, there are so many options with them. I’m just asking why? It can’t have been _that_ difficult, and it would have enhanced so many pages. I’m writing pages that use it, and IE users see none of the transparent effects. Ok, it’s not a big plus, but menus over other items is cool.

  3. Web Standards and Microsft – Perfect Strangers

    Are you using Internet Explorer 5.5 or 6 to view this page? Bet you noticed that the graphic up at the top of the page looks a bit F***ed-up. If you were using Netscape 7/Mozilla or Opera to view this…