How To: Check a Webpage Design in Multiple Browsers
Last Updated: 30th January, 2010 at 4:09 pm
Tip - Make Sure your site works on every browser!
If you have ever designed a website, or perhaps your planning to create one, one of the biggest challenges is trying to create a site that not only looks good, but looks good to everyone! A challenge that faces many web developers is trying to make a website that will always look and work correctly no matter what browser the visitor is using.
The Worldwide Web Committee set out standards that web developers and browser developers “Should” use in order to create a standard right across multiple platforms. Sadly some browsers, mentioning no names, cough, I, cough E, cough (sorry i’ve got a cold) fail or have failed in the past to adopt these clear standards or have only partially adopted them.
Now this can cause problems for web developers who make a website that works perfectly on one web browser but broken on another. Some browsers require designers to use specific code within their HTML / CSS in order to do exactly what another browser is doing but without this code!
What all designers therefore must do is test to see that their website looks and performs just the same in multiple browsers. Often web developers have lots of browsers installed on their computers to do this and compatibility with the most common browsers, Chrome, Internet Explorer, Safari, Opera, Firefox is a must in order for a website to succeed.
Ok, so that’s enough waffle, what is my point? Well Browser Shots! What? Browser Shots is a great little website I came across when designing a website as part of my University course. What the website does is allows you to enter any URL and select lots of different browsers across multiple platforms with more being added all the time. Not only that but you can select versions of browsers, like IE 6 cough awful cough IE7, IE8, Safari 3, 4, Chrome, Firefox, 1, 2, 3, 3.1, 3.5 etc etc. Also there is loads of less known browsers you can select.
So what does this actually do? Well after entering the URL selecting what browser you want to check and clicking submit the site will go a take a full page screenshot of your webpage on all those browsers you selected! It does take a while but it’s great if you are unsure whether an older browser will work with the stuff on your site!
Cloud Bite of a few of the available broswers
As it does take a while some may time out but you can extend your time period if you wish and also check different browser sizes if needed. I keep forgetting not everyone has 24” monitors 
Overall Browser Shots is a great website that is useful to all those web designers out their, go on give your website a go!
Website: BrowserShots.org
The site I am creating has frames and the logo (top frame)
looks short on the FireFox browser. It looks good on Chrome,
and Explorer. I adjusted the margins, noresize, and still looks so wrong. Why is it doing that?
Hi Marina, now frames are very rarely used in websites due to the fact of your very problem and that some devices struggle to display them correctly along with some browsers. However if you have to use them rather than creating a box using CSS then you need to directly specify the height. Something like height: 250px; without been able to see the site it is fairly hard to see exactly what is going wrong.