Cross Browser Testing (PC)

by on 7th March 2008 with 21 Comments

A sure sign of a rock solid, well coded CSS layout is that it displays consistently across browsers and platforms. A look at recent global browser stats shows that, while Internet Explorer continues to be the most popular web browser in general use, its user base is fairly evenly split between versions 6 and 7.

And although other browsers such as Firefox, Opera and Safari have a relatively small share of the browser market, it would be unwise for any web designer or developer to ignore them when testing their work.

The need for testing

The site shown below, for example, highlights the need for thorough cross browser testing. When viewed in Firefox, the site looks fantastic; but when viewed in Internet Explorer 6, the site looks broken, because of IE6’s lack of support for PNG alpha transparency (which does seem to have been catered for in the site’s code, but the solution chosen doesn’t seem to work), and also because of some positioning issues.

Cross Browser Testing for PC

Since cross browser testing for Mac has already been covered on Design Shack, this article will focus on methods for cross browser testing on PC. An obviously starting point for cross browser testing is to install each of the main browsers; the latest versions can be downloaded below:

Internet Explorer Firefox Opera Apple Safari

Internet Explorer

However, it’s not quite so straightforward when it comes to testing your work in both Internet Explorer 6 and 7. By default, Windows will only run one version of IE, and while this obviously isn’t much of an issue for the average web user, it’s more problematic for web designers and developers who need to ensure that their work displays correctly in both versions. One option for overcoming this (if you’re running Windows XP) is to use the Multiple IE installer by TredoSoft. This ingenious tool allows several standalone versions of Internet Explorer to run simultaneously on the same PC, making multiple version testing very straightforward.

Multiple IE

Another option, which doesn’t involve installing anything on your PC, is to use an online rendering service such as IE NetRenderer. Here you simply enter the URL of the page to be tested, select which version of IE you want to test it in, and NetRenderer renders a screenshot for you. The downside of this is that you only get a static screenshot, making it impossible to test dynamic features such as AJAX UI enhancements. Additionally, NetRenderer only renders down to the ‘fold’, so if you have a particularly long page it may not be of much use to you.

IE NetRenderer

Safari

In my experience, installing Multiple IE is a far more foolproof way of testing web pages across multiple versions of Internet Explorer on PC. However, when it comes to testing for other browsers on other platforms, such as Apple Safari on Mac OS X, the only real way of testing locally is to buy a Mac. A much cheaper (as in free) alternative is to use another online rendering service; this time it’s BrowsrCamp which renders screenshots of web pages as displayed in Safari running on Mac OS X.

BrowsrCamp

While there are many other browsers available across the various platforms, the browsers covered here are the ones in mainstream use, and as such should all be factored into every web designer and developer’s testing phase when laying out web content. And when you’ve finished making your latest design cross-browser-proof, be sure to submit it to our gallery.

Comments & Discussion

21 Comments

  • ogynche

    Good article. But you don’t need to buy Mac to view sites with Safari. It is now available for Windows:

    http://www.apple.com/safari/

  • http://www.designshack.co.uk David Appleyard

    Good point, but I believe there are still slight differences with how text renders and certain elements work.

  • http://www.viewinglens.com/ Brian

    Thanks for this article. I’m actually setting up my testing PC (an ancient Dell) as we speak. I’ve opted for three partitions, each with a different IE version, as I’ve heard installing multiple IE versions on the same system results in rather unstable browsers with some broken bits (conditional comments and other browser-sniffing tricks don’t act like they should). Has Multiple IE fixed these issues?

    Re: Safari, don’t Safari/mac and Safari/Win render pages the same?

  • http://www.designshack.co.uk David Appleyard

    That seems like quite a complex setup, I think that MultipleIE should do the trick – up to you though! They do render pages the same in essence but fonts differ between Windows and Mac which causes some discrepancies.

  • http://www.weaselette.com Kristy Sullivan

    Yeah, your best bet is to have multiple IE to test on a PC platform and also a Mac to test on Firefox and Safari. It’s the only foolproof method of testing. :)

  • http://www. paul

    Could have at least given the lad a link to his homepage so he knows we are talking about him here, it’s only polite. ;-)

  • http://www.remembertoblink.co.uk Robin Parker

    @ogynche:
    There is actually a link to Safari for Windows in the first half of the tutorial. The comment about buying a Mac for local testing (a bit silly I know, but I was kind of joking) referred to testing in Safari specifically on Mac

    @Brian:
    I’ve tested using MultipleIE on a couple of sites where I used conditional comments to target IE6 and 7 individually, and it worked OK for me

  • http://angiko.multiply.com angkana jivaphaiboolsak

    i think Multiple IE’s not very good.
    This programme makes comuter not working properly

  • http://www. Dave

    In some computers with IE7 (including my XP laptop), there is a hidden folder in the Windows directory called “ie7″. In that folder is a pretty clean install of IE6.

  • http://mondolibero.wordpress.com/ Mondo Libero
  • http://www.mcgwebdevelopment.com/ Matthew

    I would recommend browsershots.org. It’s free and has tons of browsers to test. However, it can take a long time to get the screenshots.

  • http://www.volume.co.uk Brian

    We’ve been using multiple IE’s for a few months now to test IE6. however for testing pages with AJAX, it doesn’t work at all.

  • http://www.volume.co.uk Brian

    RE: Dave 10th March 2008.
    After reading your post i looked for IE6 and found it, unfortunately when i looked in the about page it was version 7. shame really.

  • http://www.isquaretechnologies.com/ Isquare Technologies

    We are using Multiple IE but I think it is not good for windows. It makes our computers not responding sometimes

  • http://www.browserseal.com BrowserSeal

    If you find yourself testing with multiple browsers often http://www.browserseal.com can be very handy

  • http://www.designedbylucas.com Lucas, Miami Web Design

    I never knew all these existed. I use IE tester for the moment by I am changing to Mac because we had it with Windows and I really need a program that will work on mac.

  • http://inspirationsunlimited.co.in Inspirations Unlimited

    I mostly test in latest stand alone browsers while coding and use IETester to test in IE7, IE6. If required I go for browsershot or litmus.

  • http://www.slimming-products.net slimming products

    I like it very much and which you shared the info in this post is very useful. Thanks for sharing a wonderful post. I found this post while surfing the web.Thanks for sharing this article.

  • http://www.astraglaxo.com TA-65

    When such a fleeting tear, code becomes outdated or square meat servers, you hand hog the same stag, it offers widespread clarity while rendering and inbound passage.

  • http://www.astraglaxo.com TA-65

    Our intention can be to evaluation problems identified according even although in the path of distinctive genres of composing.

  • http://www.tgc-anaheim.com/index.php?route=product/category&path=107_108 ジャケット

    Thank you for the information that provided.

Subscribe
Membership
About the Author