Browser Undead: ways to survive ie6

Every web designer out there pretty much loathes Internet Explorer.  The latest iteration made some encouraging leaps forward in terms of accepting a universal standard or three.  The world has changed so much since the 90′s and we all know of and love our freedom of choice when it comes to browser selection.  Microsoft’s stubborn insistence on ignoring standards for years has resulted in double the workload for developers.  Testing sites across a variety of browsers and correcting the inevitable bugs takes a lot of time, which results in lower profits for designers like me.

So ie8 is ok; ie7 is tolerable…but ie6?  It’s a nightmare; the freak child of design indifference coupled with bizarre proprietary features. [aside: Who out there loves, or truly understands the idea behind ie's filters, anyway?]   I recently had a rude awakening when a client sent me a screen-grab of a site I had thoroughly tested in Firefox, Safari, Chrome, ie7, ie8 and ie8 compatibility mode.  I had the bizarre idea this year that with the release of ie8, we could lay the eight year old ie6 to rest.  I dropped support in my coding for the browser.  I also forgot to mention this in my contract.

Here’s the thing:  We’re designers (I’m making assumptions since you’re reading this).  We love the web…a lot.  In high school, they called us nerds and didn’t understand us at all.  Now, they call us “the web guy” and don’t understand us at all.  Other human beings think more about the rest of the world, rather than thinking about computers 24/7.  Amazing but true.  The other terrible truth is that around 15% of the population still uses the 6.  So while you and I downloaded the latest and greatest the day it came out, there are a lot of people out there (read that as “clients and their customers”) are firing up eight year old browsers to read their email.  So as i stared down the ugly screen-grab of my beautiful site ripped to shreds by the rotting zombie horde of ie6 browser bugs that I thought dead, I realized one thing:  I’m going to need some bigger guns.

As a designer I have two main problems with ie6: lack of support for .png images and CSS layouts that are inconsistent with all the other browsers on the planet.  In terms of understanding the bugs, I mentioned some good resources in this post. My favorite remains sitepoint.com.  Understanding bugs is not our purpose here, though.  Our purpose is finding guns…big guns.  For web developers software = guns, and I found some good stuff in my latest search.  The other good news?  I only use free stuff.

In terms of solving the positioning issue, Microsoft has created a slick tool called Super Preview that’s available for download here.  It lets you simultaneously compare a url in different versions of ie.  Thank you!  It’s stable and helps you see problems very quickly.  Half the problem is finding the bugs, and this tool does a pretty good job.  One issue I had is that it doesn’t seem to represent ie filters (specifically alpha) which is pretty crippling if you’re dealing with fixing .png’s.  Another piece of software that shows a lot of promise, and handles both the positioning and the .png issue,  is IE Tester, available for download here.  It’s currently an alpha release, and has the inherent instability related to alphas BUT it does a solid job, and has a lot of features that Super Preview lacks.  Make sure you run the program as an adminitrator (right-click > run as administrator) otherwise it’ll crash if it encounters Flash or a CSS filter (our main reason for using this rather than Super Preview).  Here’s hoping for a stable beta soon.  So now we see our bugs, and armed with sitepoint, we crush ‘em.  On to .png’s!

.Png image files are awesome for a lot of reasons.  One of their most awesome capabilities is the inclusion of alpha channels, which allow a varying degree of transparency.  As a designer, transparency is priceless.  It lets you make things shiny, or draw drop-shadows with ease.  You want this.  You need this.  ie6 says you can’t have it.  I say, thank you Angus Turnbull for writing a nice little script, aptly named the IE png fix.  His site and the instructions included in the download explain it well.  Another option that comes with a great explanation, is this entry on 24 Ways.

That should put your ie woes to rest in no time, which hopefully means you get some rest too.