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.

2 thoughts on “Internet Explorer: Bane of My Existence”

  1. The PAX link URL in your post is conflagrated with the unsquare URL so clicking the word “PAX” leads to a dead end, unless you were trying to set unsquare.com as the referring URL, then it did not work correctly.

    Ah, I can remember programing web pages. It can suck valuable time.

    Dad

  2. Hey JJ,
    Some notes: Yes IE6 is the bane of all web development existence; and at this point I wouldn’t worry about IE5.5, since that is largely unsupported by a majority of very large sites.

    As for png transparency support, there are a couple of ways to get around it.
    Microsoft allows you to apply a special Alpha transparency filter to pngs to work in IE6. In the work I do at Food Network and Scripps, we apply the filter directly to the CSS, however there is a great JavaScript I’ve used called Supersleight that can loop through your images for you and apply the filter:
    http://24ways.org/2007/supersleight-transparent-png-in-ie6

    Read about it there.

    As for ways of getting around IE’s other terrible quirks, here’s a list of CSS hacks you can apply:
    http://www.webdevout.net/css-hacks
    I would put the supersleight init call into your conditional comment.

    Note however, that the IE6 Alpha Filter does not allow you to have a background png image that has background-repeat or background-position, so CSS image sprites or tiling background images that have transparency are a no-go.
    That being said, you could also serve up alternative gifs in your conditional comment.

Comments are closed.