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.

A Blast From The Past

So it occurred to me recently that Google Video will let you post videos of pretty much any length. A guy on the Leet World forum posted a 40 minute video, so I thought I’d get in on the act and digitize the footage I have of Knifepoint, which I haven’t watched in years.

I ended up having to re-digitize the video into iMovie, and it took forever to convert the 43 minute video into a format that Google can use, but here it is:

You need to have flashplayer enabled to watch this Google video

This performance is from 2003, and is the final dress rehearsal, so there’s no audience other than the techs, who occasionally walk in front of the camera. The show was directed by Andrew Richey, and stars Barrett Michael, Lauren McCauley, and Liam Boyer. I haven’t talked to most of those people in years…

I think most people I know managed to come see the show when it was performed, but there may be a few of you out there who didn’t get the chance, so it’s nice to have this available in an online format. I think I may do the same thing with some of the other videos I’ve got lying around…

Foxytunes and Friends

I just added another Firefox plugin to my menagerie, which now consists of “Page Rank Status”:http://pagerankstatus.mozdev.org, “Web Developer”:http://www.chrispederick.com, “fireFTP”:http://fireftp.mozdev.org, and now “FoxyTunes”:http://www.iosart.com/foxytunes/firefox/.

FoxyTunes adds a bunch of stuff to your status bar that allows you to control your music player, which is a nice convenience because not only do i no longer have to open the itunes menu to skip a song it also shows the song title in the status bar, which (for me) is the really big draw. I’m going to install this as soon as I go back up to work, simply because, while OS X does allow you to click on the iTunes icon to control it, windows and its ilk has no such helpful feature.

As for the other ones, Page Rank Status is self explanatory – a necessary plugin for someone working at a web start-up very interested in its placement within the Google ranking. Web Developer is _the best_ plugin I have ever run across. It’s so incredibly helpful, and any web designer using Firefox needs to have it. FireFTP is the only one I haven’t used much. It’s an ftp program that uses the Firefox interface. So far it looks like it could be nice but it definitely needs some work.

I’ve also added some more MT plugins. This entry (and all others), for example, was parsed using a combination of “Textile 2”:http://bradchoate.com/mt-plugins/textile/ and “SmartyPants”:http://daringfireball.net/projects/smartypants/. Textile allows you to use simplified commands to write html code, and SmartyPants goes through your entries and makes all of your punctuation pretty, turning regular quotes in curly quotes, etc.