Geeks With Blogs
The Pink Blog's pink...and a blog..

This whole IE6 mess starts out with PNGs.

I'm not much of an image editor, (okay, fine.  I can't crop a picture in photoshop to save my life.)  but I do know that PNGs are pretty sweet.  Basically they allow varying degrees of transperancy, and really, who can say no to that?

IE6 can!

One of our clients decided that they wanted a gradient in the header of their site.  No problemo, we'll just whip up a gradient image and stick it in the background.  That was easy enough, but oh wait there's a bit of an issue.  There are images that sit on top of the header gradient, and they look pretty fugly seeing as the background colours no longer mesh.

But hey, this is nothing a little transperancy can't fix! Just whip up a few PNGs and... oh, IE6 doesn't support them?  Well what a surprise.

This shouldn't have been a huge deal.  It says right on the main page of the site that we are optimized for IE7+.  Not our fault you're too lazy to hit the "upgrade browser" button.  (Yes, I realize that some workplaces may only allow IE6 but really if you're at one of those places maybe you should take that as a hint and not go browsing around on the interweb until you get home ;) Anyway, a quick check on our nifty Google Analytics shows us that 22% of people who visit this site use IE6.  Well nuts, I guess we have to make the site look pretty for them after all.

This was actually pretty easy to fix.  Just added some Javascript to make it so that the PNGs don't show up looking terrible if the browser detection returns true for IE6.  Info on how to do so can be found here:

Of course, we had to test the site in IE6 to make sure this actually worked before sending it off.  And it did - but in doing so another problem was discovered.  After hitting the site, it would crash the entire browser.  Only from the main page, not from any other page. 

After some detective work, we figured that it was a couple of Flash pieces on the main page that were causing this crash.  Basically these Flash pieces used effects from Flash version 8, and our IE6 browser did not have the right version of Flash.

First of all, we updated to use the SWFObject class instead of the FlashObject class.  Then we added this nifty little thing to make it so that if your version of Flash is too low, a message is displayed to upgrade your Flash player, and the Flash pieces do not display unless your Flash version is the same or higher than the version needed to view the files.

Seems like simple logic, but our page was like this for quite a while before we noticed this.  So 22% of our clients were coming to the page and it was just crapping out on them.  This SWFObject fix is pretty easy to implement and although I haven't worked out all the kinks yet (I can't seem to get the message displaying right inside the flash block, instead a message box just pops up on the screen.) I'll link to where I got the information from.  We are currently using SWFObject 1.5 so that's why I find this info helpful, even though the big scary message at the top of the page says it's obsolete. ;)

So clearly the lesson here is: If at all possible, upgrade your browser from IE6!  I didn't realize how much I loved tabbed browsing until I had 5 windows open at once.

Oh and one other thing.  Just for fun, I tested the site using IE3.  It looked like total crap and was pretty hilarious.  This started a spiral of me looking at popular sites using IE3.  Facebook, Twitter, Google... guess which of the three looked passable :) Oh the days before CSS!

Posted on Wednesday, October 14, 2009 12:50 PM | Back to top

Comments on this post: IE6 PNG/Flash Compatibility

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © sakabelle | Powered by: