Well it works on my machine

I’ve just spent the last couple of hours fixing a very annoying CSS problem that was only effecting readers who used IE6, it came to light thanks to a comment by Jacob and Chris Walker (I would of linked to you there Jacob but you didn’t provide a URL):

Just thought I’d let you guys know your site layout is seriously broken in IE 6 (Win XP SP2). I don’t know if this is a new development or not since I usually view it in Firefox.

Followed by:

Content cut off on the left side, even if I enlarge the window (seems to have been offset to the left). Comments are floating over a scrollbar (not a huge deal, but distracting). And the plus/minus images on comments are a replaced by a blue box.

I can email you screenshots if you’d like. Also, I’ve found VMWare (or similar) works great for maintaining multiple machine configurations to test on, and VMWare Server is even free.

And BTW, awesome site you guys have. There’s a lot of really great content here.

After a fair bit of hair pulling, code juggling, rain dancing and dead chicken waving I found that the bug was caused by the way IE6 handles certain elements in CSS and by fixing changing the way we display blockquotes was able to err erradicate it.

This post isn’t going to be about how crap IE6 is handling CSS but how to avoid saying that classic line:

Well it works on my machine!


First off lets have a look at the different browsers that are used to browse different niches of sites:

Browsers Used to View Self Made Minds (this site or some splogging thief)
smm-browsers.jpg

As you can see Firefox is king of the hill. You’d kind of expect this with Firefox being the best browser for webmasters (if you disagree use the comments 🙂 ) and with our primary audience also being webmasters.

Browsers Used to View Coolest Gadgets
cg-bowsers.jpg

With CG Internet Explorer has the edge. The site is in a somewhat techie niche which is reflected by the number of users browsing with FF. As the problem we had only effected IE6 I also compared IE versions.

IE Versions

Here IE6 was dominate (typical)

Browsers Used to View Tattoos by Design
Tattoo Browsers
Here Internet Explorer has a huge advantage and is probably typical of a site that serves Joe Public, I’m not saying that people with a bit of ink are generally non techie but I’m sure you catch my drift.

Browser Conclusion
Different subject niches have different browsing preferences. Just because you designed the site, have the latest and greatest OS (I’m not going to start an OS war in this post) doesn’t mean that your potential readers have the same views (another thing you can ask your mates in the pub about, though you can only get away with asking so many questions like that before you sound like a boring nerd).

So what do you do about it
I think a lot of the points I’ve made in this post have been touching on the bleeding obvious, so to keep that manta going the solutions is also pretty obvious:

Test, test, TEST, testing, test

Okay so we need to do a bit of testing but that is often easier said than done. It’s fine doing testing on the different browsers you have on your machine, but some browsers (IE springs to mind) will only let you have one version installed at a time. As you’d expect there are a few solutions to this predicament, with varying pros and cons:

Multiple Machines
As you get older you seem to pile up a load of older machines, many of these will still be up for the job of a bit of simple browsing/testing. You can always use a remote viewer (like VNC, Remote Desktop or Radmin) to view the screen from your main machine.
Pros:

  • You’ve got a good excuse not to throw anything away
  • It’s probably the most realistic test

Cons:

  • Multiple machines take up space and power considering you will only use them every now and again
  • You may not have multiple machines

Virtual Machines
This is where you run virtual machines inside your main machine (as suggested by Jacob in his original comment). There are various software solutions to do this, including VMWare and a virtual server by Microsoft.

Pros:

  • Do all your testing on the one PC
  • Easy to add new operating systems and browsers as and when they become available
  • Backing up an entire OS is just the case of copying a couple of files

Cons:

  • Not all operating systems are supported in all virtual machines
  • You need a pretty heavy duty machine to run multiple virtual machines
  • You “should” purchase the Operating System for each VM which can get costly

Use the Web
There are various services on the web that will create a screenshot of what your web page will look like in different browsers. A great example of this is Browsercam.com (thanks Scott) (they actually use Virtual Machines to create the images).

Pros:

  • No additional equipment needed
  • Relatively inexpensive
  • Many different configurations of OS, browser, resolutions available

Cons:

  • Time delay in waiting for the images to be generated
  • You may not be able to test entire sites or specific configurations
  • Can’t test things like form input

Finally you could always get a designer that tests the theme you’ve paid them for in different browsers and doesn’t go AWOL when there is a problem, okay that may of been a bit harsh.

Conclusion
It’s a dirty job but somebodies got to do it, gone are the good old days were 99% of the population used Netscape so you do need to test and cater for the multiple masses.

About Al Carlton

Al quit the 9 to 5 rat race in January of 2007, before then he was a software engineer and systems architect of financial system. Nowadays Al spends the days running his various businesses and experimenting with different ideas and opportunities.
Al can be found on twitter at AlCarlton.

Comments

  1. Testing is good. Thanks for the tips on good ways to do this. Testing is also true off the web. In my day job I send out computer equipment and have to test it even if the configuration is identical to another system that works. It just makes things a lot more simple.

  2. Not to be picky or anything, but I actually informed you guys of this problem in the post before Jacob did. I always appreciate a good link;)

  3. I use the rather handy IE Tab addon for firefox which allows you to view a page in IE while still using firefox. You can find it here http://ietab.mozdev.org/

    Obviously you still need to test as much as you can, but the IE tab is really useful if you are looking at a web page and need to switch to IE at the click of a button.

    • Cheers Garry, I use that as well. It’s great for checking IE inside FF but not different versions, still a great addition to the webmaster arsenal.

  4. Yeah, nice to look at your stats between sites.
    I found a health site had 85% IE and 10%FF, whereas for a coffee site FF was up to 33%. I can therefore scientifically prove that firefox users drink more coffee 🙂

  5. Hi Al, glad I could help. I didn’t put a URL because I’m just getting started and at this point I only have a couple of in-progress sites with no real content on them yet.

    Thanks for the tip on using Browsercam.

    RE virtual machines: I use a combination of the first two. I run my VMs on a separate box that has a cheap Sempron and I just bumped the RAM up to 2GB (more would be better, but it runs OK as is). I use VMs for everything from source control (Subversion on Linux) to testing. I even have “throwaways” that I use for trying out new software or running programs that I don’t need to use very often.

    TIP: I’ve found that for the VMs running Windows, they are actually more responsive when I remote into them than interacting with them through VMWare.

  6. tecwzrd says:

    http://browsershots.org/ is another 20 browser checker with screen shots.

    I’ve always used Dreamweaver for creating sites and Dreamweaver has a built in browser checker installed which shows how the page works (including plugins and forms) for each browser. I assume that most programs have this feature unless it’s “free”.

  7. A general rule is that if it works on IE, specifically IE6, it’ll work on most of the other browsers (Firefox, Opera).

    A similar thing happened to a wordpress blog of mine. It was working A-OK on Firefox, but had major problems in IE.

  8. Richard says:

    This is a good example of working IN the business and not ON the business. If possible I would outsource this type of work. The time spent debugging the site could have been used to formulate a new marketing plan or brainstorm a new site.

    But when you new to this business it’s hard to find a reputable developer to depend on.

    • That’s a very valid point Richard and I totally agree. It was one of those that I thought would only take a few minutes (yeah right) which when combined with writing this post turned into a mornings work. Live and learn.

  9. It can be all too easy to forget that your site will appear differently on different machines. I think it is important to reward those users who report problems to you – as you have done by linking to them in your article.

    – Martin Reed

  10. Al,

    Great writeup and yea, testing is a pain … but necessary. One thing I didn’t see you mention is did your HTML/CSS W3C validate?

    Note that this is *not* a sure-fire way to ensure it looks good in all browsers (as you know, IE has quirks!), but at least for me, I’ve found all sort of boo-boo’s that might have otherwise slipped through.

    alek

  11. Interesting article. I especially liked your struck through comment about designers who go AWOL. As a web hoster & developer, I consider the statement to be neither harsh nor inaccurate. The prevalence of designers either not being available, or, worse still, giving you major attitude when they consider themselves to have finished with you, is probably what has lead to the increase in popularity of content management systems. A couple of years ago, if you mentioned CMS, you were met with disapproving stares. They were clunky and more than a little confusing, requiring a large helping of tech-savviness to produce anything worthwhile. Now, with offerings from Joomla!, Drupal, and Mambo, CM for the masses is rapidly becoming a reality. I consider Joomla! to be the best of these, with the basic installation being extremely customizable, especially with thousands of templates being available for look and feel. To tie this in with your article, although the basic installs of these CMS’s is very well validated across all browsers, the plethora of third party templates on offer has resulted in, in some cases, sites not validating across all browsers. IE, mainly 5 and 6, seems to be the biggest culprit, especially in terms of CSS. The problem is probably exacerbated by the fact that a design must be validated on, at least, the three most recent versions of IE, since, as you rightly pointed out, IE users, as a whole, are the least technically inclined, and, therefore, the most likely to still be using older versions of the browser. Thankfully, IE 7 seems to have addressed many of the CSS validation issues that had designers gnashing teeth in their quest for W3C compliance.

Leave a Reply