In my post yesterday, Making a Popup Window in WordPress, I mentioned that my theme was rendering a little differently in some browswers and that in some of them the lines of code were too wide and were being cut off. How did I know this? I don’t have a bunch of PCs, Macs, and Linux machines sitting around running different versions of Internet Explorer, Firefox, Opera, Safari, etc.What I do know is that this nifty site Browsershots will (for free!) look at any page you want and generate screenshots of how that page looks in a whole assortment of browsers.
In some browsers the fonts seem to be a little wider or narrower and in my case, the wider ones were causing long lines of code to wind up being cut off by other elements on the page.
When you go to Browsershots, you are given a huge number of browsers to test your site with. I wouldn’t worry about every single one of them — just look at a bunch of them to get a feel for major problems. If a bunch of text is cutting off or things aren’t lining up properly in a few of them, then you probably have a problem worth addressing. If you have some enormous amount of resources and you’re making a site for a mass audience, obviously it’s worth putting additional effort into this. Otherwise, I just consider it a quickie tool for catching serious mistakes.
Here I’ll include 3 interesting examples, using the popup window code post.
* To close any of these popups after viewing them, just click the CLOSE button in the upper right of the popup.*
In SeaMonkey 1.1.14 it works fine.
In Opera 9.64 the code gets cut off by the sidebar.
So there you have it. It’s easy enough to take a quick look at your site and make sure that most people are seeing it the way you intended it to be seen.