by Kyle Weems 12.October 2007 15:13
CSS Designers are an obsessive breed. It isn't good enough for us to make a site look good on our favorite brand of browser and then attach a snooty "Best viewed with Our Browser Of Choice". No, we clutter our desktops with links to not only the popular IE7 and Firefox, but also esoteric gems like Opera. We even installed Safari for Windows, out of curiosity. Those of us on PC have a Mac somewhere in the corner to view browsers on Mac OS, just in case. Some of us even go so far as to have a third machine running Linux (although I've yet to dig that deep into the rabbit hole).
Some CSS designers, having descended too far into madness, cover their faces with woad and dance ritualistically around machines loaded with IE for Mac 5.5, rabidly ensuring that even the special-needs member of the browser family loads pages properly.
I'm not THAT far gone yet, but I'll admit that recently I realized that I needed to pay more attention to Internet Explorer 6. Although IE7 has been out of beta for approximately a year now, according to W3Counter as much as a third of all net users still use IE6. Since IE6's CSS support is as good as the anatomical correctness of a deer in a cave painting, this means that we designers can't just compare CSS in the compliant browsers and assume that a large part of our audience isn't getting a different viewing experience.
So the question was, how do I keep checking site designs in IE6? I've upgraded all my machines to IE7 (which personally I only use for testing. Firefox makes me warm and happy inside).
Fortunately, Microsoft has an answer. For those of you with this problem, go get their Microsoft Virtual PC 2007 (don't worry, it's free) and then the XP with IE6 virtual disk. Go get a donut from around the street corner while it downloads, as it'll take a while. (Don't have a donut shop near your studio? That's a shame. It's great!) Install the Virtual PC, run a XP virtual machine with the XP with IE6 virtual disk, and load up IE6 inside the virtual machine.
Then when you're done with that marathon process, load up your website on the virtual machine. I suggest putting on a gag first, as you might loudly scream in anguish as your work of art mutates in front of you into a hideous blob that is begging for death. Once you've calmed down a bit you can take out the gag.
If your site has any complex CSS tricks involved in it's creation then it's not going to be pretty. But fortunately there's a brave soul that walked down this road before us, and he left a beautiful present to fix things with. His name is Dean Edwards, and he created the IE7 script. No, it's not for IE7. It exists to make IE6 act like it. Which isn't as awesome as making it completely css compliant, but it's a long step forward.
If you're like me, you don't like cluttering your site with someone else's code. However, I reccomend taking one for the team and downloading his script and installing it to your site. Once you've finished, reload your site in IE6. Looks better? Good.
Even after using the miracle worker's magic potion you may find major issues with your design. I've found that the majority of them can be solved with putting a "position: relative" in any div that doesn't have it's position already expressly stated. Or lists, or any element that may need it. I'm not sure if it's actually the case, but it appears often to me as if IE6 gets confused with divs that don't have a position style declared, and sometimes decides to drop the div altogether in it's addled state.
So those are my top three suggestions to getting your site to work right again for a third of the Internet's audience.
1. Install Virtual PC and get a virtual disk with IE6 running on it. Visit it often.
2. Install Dean Edward's IE7 script.
3. Position: Relative. Make it your friend.
These won't solve all your problems. I'm still wrestling with an unordered list that arbitrarily locks up IE6 when I scroll it, of all things. But instead of considering a career change into something easy, like mechanical engineering, you'll find the site improved to the point where your CSS skills can finish fixing up the job.
So put down the phone book in which you were circling all the listings under "black magic". Because you don't need it.