PNG-24 Alpha Transparency and IE

All I had planned for tonight, was hours on end of smokin’ demons in Doom 3. Turned out, all the projects I have on the go are ‘on hold’ until I hear from my clients. So I decided to take advantage of the situtation and get moving on Media Press version 9. I started working on the layout back in May and have only had a couple chances since to work on it. I cut it up and starting building pages and everything was going great. Then I opened it up in IE. Motherbitch looked horrible! As if I needed another reason to have Micro$oft. It seems their browser doesn’t display 24-bit PNGs the way it’s supposed to. If you’re not familiar with PNGs, the 24-bit version uses Alpha Transparency, which results in wicked smooth edges on transparents images. And since my layout has a nice 20 pixel gradient around the edges, which is on top of a nice colour, diagonal background. (example below) The easiest and best way to do this is to use PNGs.

I thought for sure I was going to have to start from scratch. But before doing anything drastic I Googled ‘IE PNG‘ and to my surprise (ridiculous amount of sarcasm there) there’s a crapton of other designs that have experienced this very same issue.

The first solution I tried worked great for images that were displayed using the image tag. But left others that were background images as they were. I thought I was screwed for sure. Everything I came across required the images to have a width and height tag. Luckily, I ended up on some dude named Blake’s site. He found a ‘hack’ that uses CSS to trick IE into using a different image. You specify a background image you want Mozilla based browsers to use and one for IE. Since I was left without any other options, I had to use GIFs for the background images to be displayed in IE. So it doesn’t look that great, but it’s better than re-doing everything. What a pain in the ass though.

Stupid M$.