Tech

PNG transparency in IE

I finally managed to get all of my PNG graphics working properly in IE. For those that don’t know, IE (Win) does not support transparency in PNG images. The welcome box on my home page and the “frosty” bar in the header are examples of a PNG with transparency – you can see the background through the image. Microsoft has a workaround that involves a little code and a lot of finding just the right mojo to make it all happen the way you intend. There are many variations out there. A quick search of “IE PNG” on Google will bring you lots of love. I have opted to use a PHP solution by Justin Koivisto. I chose it for a number of reasons, primarily because it was the first one that, for whatever reason, I could actually get to work. I also don’t want to rely on users having javascript enabled and I tend to lean in the server-side solution direction generally.

So, I got the thing working with my headers from the get-go but couldn’t figure out why my front page box wasn’t working. I finally abandoned trying because I just needed to get the redesign up for God’s sake and I have been busy with several projects running. Well yesterday I had the day off and finally decided to worry at the problem again and I had the breakthrough that time often gives us. It had been so long since I originally looked at the script that I READ THE DIRECTIONS. Boy howdy if that doesn’t do the trick sometimes. The header is an image on the page (in HTML) and the box is a background image (in CSS). The script only works in CSS when you use it inline and, the kicker that had thwarted me, it is looking for the background-image selector. I always use the css shorthand background and so it refused to work for me. So, now it is working and I can have my nifty little semi-transparent box on the front. Ah, sweet CSS success.