Internet Explorer: Bane of My Existence

I spent a few hours tonight working on a new site for the Smooth Few Films crew. GamerSushi is a blog focusing on gaming news and reviews, and Eddy wanted to make sure it was ready before he attends PAX this weekend.

Most of the site’s setup was fairly straightforward, but one piece of the design caused me no end of frustration. Apparently transparent PNG images, which look great with transparencies, don’t play nice with Internet Explorer 5.5 or 6.0 on Windows.

Considering how bad people are about updating their browsers, having a weird-looking PNG on your site will definitely be noticeable to a fair number of your visitors. Accordingly, I spent way too long messing with the site trying to figure out a fix or workaround to get things moving. This was especially frustrating since I don’t have easy access to, say, a Windows computer with Internet Explorer of any kind on it. Thank god for Browsershots, that’s for sure.

Anyways, to make a long story short, I tried every Javascript hack I could find in Google. None of them worked. Not a single blessed one. Maybe it’s just me, and I implemented the code wrong, but it’s kind of hard to tell when I’m not the one sitting in front of the computer with a broken image.

In the end, the solution was a bit crude. Apparently it is possible to comment out HTML code for specific browsers using conditional comments. Basically I put a few lines in the html that made it so a certain code snippet only displayed in Internet Explorer versions older than 7.0. I then did a bit of CSS trickery to hide the offending PNG and replace it with a shitty-looking GIF. It isn’t perfect, but it’s better than a giant grey box behind the PNG.

Here’s the code:

1. <!--[if lt IE 7]>
2. <style>
3. #sitename img { display: none; }
4. #sitename { background: url(<?php bloginfo('stylesheet_directory'); ?>/images/header_logo.gif) no-repeat; width: 360px; height: 95px; margin-left: 30px; margin-top: 30px; }
5. </style>
6. <![endif]-->

Lines 1 and 6 are the conditional comments. Line 3 hides the PNG image, and then line 4 sets the GIF as a background for the H1 tag and makes sure that it is properly sized and aligned. I did it this way because I didn’t want to mess around with Javascript, since I didn’t have any luck with the Javascript examples I had found on the web.