As a website proprietor I want everyone to come to my site. First of all the traffic validates my labor, and second I hope to make some income. A lot of time is spent on design. We want people to find our websites intuitive to navigate and easy on the eye. Once we are satisfied with the design, we may or may not care that all of our visitors are getting the same experience. We should, and I think most of us do take a look at the finished site to make sure it looks proper in a variety of web browsers.

My preference is for Mozilla-based browsers, but KHTML-based browsers (Konqueror, Safari, OmniWeb) and Opera are also excellent choices. There’s no denying that Internet Explorer is still a big player in the web browser business. Since my site’s inception on August 5th of this year, 46% of my visitors have surfed in on Internet Explorer.

So, I thought that I had my site’s behavior nailed down to perform the same regardless of web browser. That was, until two weeks ago when I discovered another hoop that Microsoft was going to make me jump through to get my site to work as intended in Internet Explorer.

The hurdle was that Internet Explorer prior to IE7 did not support transparency in images. This is an issue for me, because I use a transparent PNG in my header graphic. I use an obscure font for my logo, so I can’t just slap my name up in HTML, I have to whip it up in Photoshop as a transparent PNG that lays on top of my header. That logo is my brand. I need everyone to see it the same, regardless which OS or web browser they are using.

I’m a Mac user at home, and at work we are 100% Firefox, so I hadn’t noticed that my logo was a big, gray splotch on the header for IE users. My first reaction was that’s what they deserved for using a crappy web browser, but then reality sank in and I realized nearly half of my visitors saw an unfinished-looking header perched atop my pages. Unacceptable.

IE7 now supports transparency, but there are still a lot of IE6 users surfing out there. The answer? I found that someone had already done the work for me and written a javascript workaround that allowed IE6 to display transparent images. The solution is to embed this script in your pages if you have any transparent images on your site. If you’re feeling particularly clever you can save the script as pngfix.php and add this single line to your header:

<?php include_once “pngfix.php” ?>

The end result? Your web page is a couple kilobytes larger and IE6 will now display your transparent images as you intend them to appear.