by Kyle Weems 5.November 2007 10:33
Whilst working on a CSS cut for a recent project, I found that once again, despite the best efforts of mice and men (note to self: train mice better) my page looked somewhat like roadkill when I went to view it in Internet Explorer 6. (Second note to self: start more posts with the word 'whilst'.) As I've mentioned before, I'd gladly cut myself away from IE6 like a frostbitten explorer does with his toes, but approximately a third of all Internet users have yet to 'get with the times' and still use the doddering browser with it's standards compliance issues.
At this point being an old hand at life & death struggles with IE6, I cackled like a madman while reaching into my pocket for the magic potion that would put the fight in my favor: Dean Edwards' IE7 script. Now, I'm not a fan of putting about twenty random JS scripts in a project that I didn't make myself. I'm a bit of purist in trying to fix problems with my own solutions. But the two choices were either use this magician's well-concocted solution to a css designer's worst problem, or replicate all his effort on my own. After quickly checking with my boss I learned that in fact our client did not want to spend thousands of dollars and months of time doing option B.
So I drank the potion.
Normally, adding the script to the project usually provides something that is at least in the same ballpark as the original design. However, on this particular project when I refreshed my broswer window with baited breath, I found that the project now looked like... roadkill. Just slightly different roadkill. What followed was something like an epic journey into madness, as I futiley tried to correct the various background elements on the page, all of which seemed to have a mind of their own. They'd refuse to obey positioning styles. They wouldn't repeat. Sometimes I could get them to reposition themselves, but they'd leave a ghost image in their original place. After about the third time that I closed and opened the project to make sure I was actually changing the right stylesheets, I began to seriously question whether I was awake or in one of those nightmares where the only thing between me and the environment was my underpants.
In desperation, I plugged every variation of the words 'IE6' 'CSS' and 'PNG' into my search engine of choice. Finally, after a marathon of design blogs and forums I stumbled across a most embarrasing discovery.
The backgrounds that were misbehaving were PNG files, which for various reasons were needed for transparent effects on the page. I had found, after much searching, that although Dean Edwards' handy little script allows PNG transparency to work, the way it does so involves an obscure filter property in IE6. Which is fine and dandy for normal images. But with background images, the process essentially makes the background not a background (I know, it's confusing). Which, of course, means that no amount of CSS is going to tell it how to behave. I wasn't going crazy and the stylesheet changes were correct, it's just that I hadn't read deep enough into the user guide for DE's script.
Ugh.
At any rate, the solution was to get an alternate stylesheet for IE6 that would load up GIFs instead of PNGs for the backgrounds that needed transparency. (Look into conditional comments for IE. They're life savers). It's not as pretty by far, but it provided an approximately identical experience for IE6 users (which was much prettier than the nightmare that Dean Edwards and the PNGs together created). Meanwhile, the more compliant browsers would continue on their merry way using the original PNGs, looking quite pretty in the process.
So remember, sometimes the solution can be the problem. PNG backgrounds and Dean Edwards are two medications that should NOT be mixed.