Different browsers render HTML differently. For example when I make a simple table in one of my posts so I can put an image with a caption under it hovering on the right hand side, I invariably find that it looks different in Firefox and Internet Explorer. See a comparison below:
|Blog image in Firefox 3|
- lovely space around the copyright
|Blog image in IE 7|
- horrible text coming too close to bottom of copyright
Now this becomes quite a serious problem if the difference between browsers renders some functionality or usability of your website unusable.
It's therefore important to check on building a new website how it renders in other browsers, something I’ve done in the past by having a number of browsers installed on my PC. There are also a number of programmes that allow you to have multiple versions of different browsers installed at the same time - for this exact purpose.
That is a bit of a hassle though, and browsershots.org makes this easier. You just have to wait for an hour or so. The site provides a quick view, as below, and also the option to download all screenshots in a handy zip file.
- As it works on a page by page basis, if you want to check multiple pages you will have to wait each time for them to upload all the screenshots - which can be up to an hour and a half depending on how many different ones you want.
- You're only allowed 100 shots in a 24-hour period. I've just done 37 so you can see how quickly you could use up your quota.
- Both these problems don't exist if you pay for the priority service at €21.95 a month.
SEO problems of white text on a dark background (Jul 2008)
What font / text size online and how to set it in the CSS (Oct 2008)
Improve and check your website's readability (Mar 2009)