Boilerplates & Other Tools

The Importance of Cross Browser Compatibility: Tips and Resources

April 30th, 2010

By Sean Geng

Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site.

How does your website function across all these options? It’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. In this article, we’ll cover some basics of making sure your site is cross-browser-compatible, including snippets and resources to help you along the way.

The Problem

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

So what are the options? The data about current browser share varies depending on the source and the region, but in general, Internet Explorer, Firefox, Chrome, Safari, and Opera make up most of the market share, with Internet Explorer dominating the market. Internet Explorer 8 has over 25% market share, Internet Explorer 6 has 215 and Internet Explorer 7 having 14%.

When there are so many different options out there, each running their own rendering engine, how do you ensure that your web design or application will hold up in each of them? That what we hope to cover and provide solutions for in this article.

How does your site perform?

So, how does your current site perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.

Adobe Browser Lab
Adobe Browserlab offers an awesome solution for viewing on demand screenshots of your site. This is usually my go-to program for testing in various browsers.

Adobe Browser Lab

Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.


Browser Sandbox
Runs an application to view your site in a variety of browsers.

Browser Sandbox

Allows you to test the compatibility of your design with Mac OS X browsers.


IE Tester
A free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.

IE Tester

Browser Proofing Your Site

So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.


First off, validate your site. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3’s XHTML Validator and CSS Validator.

CSS Reset

Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
/* remember to define focus styles! */
:focus {
        outline: 0;
body {
        line-height: 1;
        color: black;
        background: white;
ol, ul {
        list-style: none;
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
caption, th, td {
        text-align: left;
        font-weight: normal;
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
blockquote, q {
        quotes: "" "";

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
table {
fieldset,img { 
address,caption,cite,code,dfn,em,strong,th,var {
ol,ul {
caption,th {
h1,h2,h3,h4,h5,h6 {
q:before,q:after {
abbr,acronym { border:0;}

Either include thet CSS reset styling at the top of your stylesheet, or have Yahoo host it and simply link to it in your HTML-documents, right before your own stylesheet:

<link rel="stylesheet" type="text/css" href="">

Conditional Statements

Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.

One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.

To use conditional statements, simply include the statement in the head section of your XHTML, right below the stylesheet inclusion.

Include a stylesheet if the browser is IE

<!--[if IE]>
        <link href="ie.css" rel="stylesheet" type="text/css" />

Target Specfic Versions of IE

<!--[if IE6]>
        <link href="ie.css" rel="stylesheet" type="text/css" />

(Of course, you can replace IE6 with any version of IE)

PHP Browser Detect

If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script. It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.

PHP Browser Detect

jQuery Browser Detection

For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection using jQuery. The script adds a class to the body, which you can then style in CSS.

Mobile Devices

Things are changing. New devices are emerging as a medium for browsing the web these days. Whether it’d be smartphones, iPods or an iPad, there is a new enviornment for web design and as they become increasingly popular, it means that you must also take them into consideration when designing a site.

What does my site look like in a mobile device?

How about testing your site in some web based mobile emulators? If you are looking to test your design in a mobile device, here are some great resources:

Test iPhone
Simulator for quickly testing your iPhone web applications

Test iPhone

iPhoney is a free application you can download in order to simulate a iPhone browsing experience. Includes support for rotating, zooming, and even turning off plugins like Flash.


Excellent tool for testing in mobile devices. Provides feedback including test results, options, and emulators.


Mobile Device Emulator
A great way to test your site across a multitude of mobile devices.

Dot Mobi


Ways to make your site mobile friendly

So how do you go about making your site mobile friendly? Well, if you are interested in pursuing a mobile version of your site, here are a few ways of doing so.

Redirect Users on a Mobile Device
An easy way of making sure your site is mobile-friendly is to redirect users viewing it from a mobile device to a certain “plain” version of the page on your server. Some of the easiest ways of doing this include Studio Hyperset’s Mobile Redirect Script, or using Mobiforge’s Lightweight Device Detection in PHP.

Mobify allows you to design a mobile version of your site based on your current design. It also allows for traffic stats and advertising options.


Mofuse lets you create a mobile version of your blog for free. It’s pretty easy, and only takes a bit of time.


Further Resources

Still hungry for cross browser compatibility resources and solutions?

About the author

Sean Geng is a freelance web designer based in Pittsburgh, PA. He is the site curator over at Designmess, a online community for designers and developers. You can follow him on Twitter, or contact him via his website.

Tags: ,

56 comments for „The Importance of Cross Browser Compatibility: Tips and Resources
  1. Zilus on April 30th, 2010 at 5:54 am

    Great Article! I enjoyed a lot reading it, a lot of helpfull tips.


  2. Grün Weiss on April 30th, 2010 at 6:18 am

    the IE Tester is very helpfule vor the CSS Problem in the IE Browsers

    • Lewis Nyman on April 30th, 2010 at 6:41 am

      Be careful with the IEtester, we used to use it and then realease it only simulates what I thinks it will look like in older versions IE.

      It is no 100% accurate.

      In the office we connect to servers remotely that are running IE6 and 7

  3. esranull on April 30th, 2010 at 8:56 am

    good article thanks lot

  4. Rachel on April 30th, 2010 at 9:09 am

    Thanks mate really helpful article. I wonder if there are any Linux software for this purpose.

  5. Mario Giambanco on April 30th, 2010 at 9:19 am

    Finally an article that covers this. Good job.

    Although personal preference, I keep separate machines for the major ones. A laptop runs windowx xp with ie7 and firefox 2 – another pc runs windows 7 with ie8 and firefox 3, safari on the iMac and iPhone for mobile.

    And although I’m not advertising it just yet, I make a quick pass on the iPad just to see, but if it works in Safari, its proven to be solid on there as well so far.

    I’ve used many of the services listed above and I just prefer to have it live on a PC. Some of the screen shot ones can’t convey flash and although the majority of work we do is strait html, sometimes flash has to be used for ad’s or the like.

    I am slowly moving to VM’s, but even then, the drain on the system is so much so, i have the machines laying around, so i may as well offload the task to them.


  6. S on April 30th, 2010 at 9:51 am

    Internet Explorer 6 has 215

    I assume you mean 21%. No need to approve this comment. Thanks for the article! :)

  7. JayTurn on April 30th, 2010 at 10:01 am

    Great range of resources. I would actually say the majority of headaches come from IE6 and IE7. As Lewis mentioned, IETester isn’t 100% accurate so it is best to run older versions of IE on separate machines.

    My wish as a designer, IE6 and IE7 were obliterated and IETester worked as nicely as Firebug does.

    PS. I personally would add Firebug to the list as it is the easiest method of testing website layouts.

  8. Matthijn on April 30th, 2010 at 11:58 am

    * {
    margin: 0;
    padding: 0;

    My CSS reset, works for everything, never have any ‘trouble’ getting things cross-browser-compatible with that.

    • Jan on May 2nd, 2010 at 2:35 am

      I agree,
      no need for a long css resetter.
      This is mine :


      html > body{font-size:11px; (example size)}
      background-color: #-a-colour;
      font-family:font-name, font-name,….;
      font-size:68.8%(example size compensated for
      cross-browser size reliability);

      • Dr. Q on May 3rd, 2010 at 6:24 am

        The * selector slows the rendering of the page.

        There’s literature regarding this, or you could install a profiler like Google’s Page Speed and check it out for yourselves.

        In any case: You’re doing it wrong.

  9. designfollow on April 30th, 2010 at 1:42 pm

    very useful.

    thank you very much.

  10. piyashrija on April 30th, 2010 at 6:09 pm

    nice article..luv it

  11. Shabir Gilkar on April 30th, 2010 at 10:26 pm

    It is really nice article and the tools given are really helpful.

    Shabir Gilkar
    Kashmir Asia

  12. Design Dazzling on April 30th, 2010 at 11:00 pm

    its very nice and clear article .. thanks buddy

  13. Omer Greenwald on May 1st, 2010 at 2:23 am

    Great write up. I find iecollection more loyal to the original ie than ietester.

  14. gavin on May 1st, 2010 at 3:04 am

    I’d love to see a list of common bugs in the browsers and how to fix them.

    Great article thanks

  15. Ramsez Stamper on May 1st, 2010 at 10:58 am

    Why is it that cross-browser compatibility is such an issue? All you need to know is how to properly use floats, properly use positioning. Besides that, all the newer browsers all handle code decently. If you account for IE7/8, Chrome, Firefox 3+, you cover 95%+ of the market. Also, if you want to see how it looks in other browsers, download them and actually use them, sites like browsershots are not always accurate, it’s better to see it for yourself.
    This article highlights how people come up with hacks to make these things work, there’s always a separate IE css file, or a whole javascript file dedicated to fixing IE stuff, none of this is necessary if you just learn to code properly.

    • William G. on May 1st, 2010 at 6:56 pm

      “Also, if you want to see how it looks in other browsers, download them and actually use them, sites like browsershots are not always accurate”

      I agree with the second part of your statement, applications to simulate browsers aren’t always accurate. However, the problem with the first part, about downloading the browsers, is that I have a Mac, and I think many designers do. I don’t have Bootcamp or any other emulator, so I am forced to rely on BrowserShots and the like.

      • Ken on May 7th, 2010 at 7:54 am

        Try CrossBrowserTesting. Works for all platforms (including mac), and allows you to test across all platforms, including multiple versions of Windows and OSX. Provides both screenshots and live testing. The live testing allows you to connect to any of the configurations via VNC to actually use and interactively debug your site.

    • Lars on May 4th, 2010 at 8:56 pm

      I agree that using automated tools to see browser screen shots is not going to be very accurate. I always test in the actual browsers myself with 2 computers setup for IE6 and IE7 testing that I can remote desktop into. With screen shots there’s no way to test behaviour and functionality from forms or JavaScript. Some of these tools can still be useful to get a quick visual check if stuff is where it’s supposed to be since it’s not practical to setup test environments for a wide range of browsers with different browser versions on different versions of operating systems.

      By the sounds of it you’ve never had to do much IE6 testing. Learning to code properly has nothing to do with IE6 fixes. Even if you have perfect mark-up and follow CSS specifications to the letter and adhere to known web standards IE6 will always screw up in one way or another. IE6 is buggy and regardless of how much you’ve coded correctly it, more often than not, renders stuff incorrectly. IE7 is significantly better but still has some serious issues rendering valid CSS/HTML.

  16. Edward on May 1st, 2010 at 4:23 pm

    For an extension of the iPhone simulator check out ProtoFluid, described at…

    Rapid Web App prototyping using CSS3 Media Queries. Lets you specify custom device dimensions, not just iPhone.

    Thanks, great article!

  17. nik on May 1st, 2010 at 5:02 pm

    „It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.“

    No it wont, if your browser doesn’t delivers the user agent setting to the webserver during the page request. „Never trust user input“ is the webdevelopers principle. And the user agent setting is one of these header informations, a client can manipulate or set to whatever he wants. So don’t count on gettings the right browser informations just because You’re using this piece of software! Create the layout cross-browser-compatible is the better way to solve these problems.

    Sorry about my rough english. Regards –n

  18. William G. on May 1st, 2010 at 6:53 pm

    Great article! I think browser compatibility is important, but I don’t think its necessary to ALWAYS support every browser. I think that compatibility has a lot to do with your target audience. For example, I doubt that many designers-especially web designers- use Internet Explorer. For that reason, I feel that blogs like this one don’t really need to worry about supporting it. My previous statement is only an assumption, of course, so I could be wrong. Anyway, that’s just how I feel about it. Again, great post!

  19. Sunny Kumar on May 2nd, 2010 at 7:59 am

    Very Useful Post, Thanks for this :-)

  20. Tim Igoe on May 2nd, 2010 at 11:43 am

    Very useful article – nothing can beat the testing of the site in the real browser itself, VirtualBox combined with images for various versions of windows / Linux help with this testing for me personally. Granted, there is always a limit to how many you can test in (time = money etc).

    Making sure you always check it in the majority of common browsers is a must though (IE6, 7 and 8, Firefox then Opera and Chrome/Safari)

  21. rohnn on May 2nd, 2010 at 12:20 pm

    TO IE Tester, I prefer :

    Allows to install multiple version of IE on one machine.

  22. mintocity on May 2nd, 2010 at 8:36 pm

    Excellent well narrated article..

  23. ken shan on May 2nd, 2010 at 10:07 pm

    I just build a mobile version website with Mobify, it’s simply awesome!

  24. redman on May 3rd, 2010 at 12:05 am

    Internet Explorer 6 has 215? Maybe was the bad karma from ie6 or just need to press shift harder to make it 21%! Beside that, personally i don’t like conditional statements or any kind of browser sniffing to achieve cross browser compatibility, but i try to make compatibility happen using a cross-browser custom css framework. While building a custom framework is not a first option for many, you can take the “easy” way by using an open source css framework like blueprint, 960 and many others.

    PS: check spelling of /tools/the-importance-of-cross-browser-compatibi..ty/ and correct it before gets link juice.

  25. Jordan Walker on May 3rd, 2010 at 4:41 am

    Real nice article, it is very important to cater to different browsers.

  26. Jason on May 3rd, 2010 at 5:58 am

    You pointed out a few browser comparison tools that I haven’t seen yet. I’m going to try out the IE Tester. Like Tim Igoe, I’ve got a couple VM’s running through Virtual Box – one for IE6 and one for pure IE7, then I’ve got all my other testing browsers installed on my primary. I’ve even started testing in Flock to maintain a different perspective on the mozilla browsers, and using Avant and Maxthon2 for yet another iteration of the trident engine.

    Also, I have been using the expression web super preview to get a view of IE6, 7, 8 and firefox. it helps, but is limited (and slow, like most MS stuff).

    Great article and great topic to cover.

  27. Charlie on May 4th, 2010 at 2:28 am

    Um i am here for tips on crossbows and am disappointed

  28. Grad on May 4th, 2010 at 2:29 am

    awesome.. another decade of dealing with unclosed tags, mixed case tag names, an non quoted attributes. really im ecstatic.

  29. Trok on May 4th, 2010 at 2:30 am

    Unfortunately the majority of the time a margin and padding reset is need in order to stop IE from ***** up. There’s no way to “set everything to appropriate values” if an element isn’t supposed to have padding or margin to begin with. Going around adding margin and padding 0 to every element is also stupid. This is why a reset is needed. I wouldn’t go as crazy as resetting everything the author had though.

  30. Kaffebønner on May 4th, 2010 at 4:53 am

    Cross-browsing is hell!
    But nice article… :-)

  31. Jenny on May 4th, 2010 at 6:02 am

    According to W3Schools, as of April 2010, Firefox is the most used browser with nearly 50% of users , IE 8 at about 18% and Chrome close behind with about 13%. IE6 is at about 8% and IE 7 is at about 9%, with more users dropping them each month.

    Just thought I’d throw it out there that IE might not be the most used browser.

  32. sedunia on May 5th, 2010 at 9:17 am

    at least these tools will make some development easier.
    thanks for the list.

    has anyone tried browserlab in dreamweaver cs5?

  33. CSSReX on May 6th, 2010 at 12:06 am

    Thanks for this wonderful article. I have realized the importance of reset.css however this is a Plus to that.
    Thanks again!!

  34. Evan Skuthorpe on May 6th, 2010 at 2:15 am

    What a great article. I’ve never thought of using a CSS reset. Might start doing it from now on.

  35. Sachin on May 12th, 2010 at 3:18 am

    very useful resources..thanks

  36. Eru on May 12th, 2010 at 10:07 am

    Highly useful article and tools. Thanks a lot man! There is no way in which we can escape cross browser compatibility now!

  37. Techwatch on May 13th, 2010 at 7:33 am

    There are certainly some substantial advantages to chrome in my opinion, not least of all its stability

  38. Marc on May 24th, 2010 at 10:53 am
  39. Orik on May 28th, 2010 at 3:01 am

    Nice read, but you did not mention one tool that I find very auseful for automated cross browser testing – BrowserSeal.Robot

  40. Chelsie Freeby on August 8th, 2010 at 6:47 am

    Many design schools and community colleges offer short, intensive summer courses. These are a great option for someone who wants more web design education, but can’t commit to a full-time program.

  41. Ethan on March 16th, 2011 at 7:05 am

    Excellent article! Love your site!

  42. Abdul Baquee on May 9th, 2011 at 6:39 pm

    Its a really cool post.
    I like it

    thank you for posting these types of articles.

  43. uttam on July 28th, 2011 at 11:26 am

    this is uttam
    my problem is dropdown menu not working in internet explore

    so plz help me

  44. RAHUL on August 4th, 2011 at 8:50 pm

    Great article Sean, read the full article after so many days. Otherwise there are a very few articles which are worth reading top to bottom.

    Keep it up.

  45. dshivakumar on September 23rd, 2011 at 12:36 pm

    Good to read such valuable information. Thanks.

  46. Jaco on January 28th, 2012 at 2:03 pm


    This code is wrong:

    (Of course, you can replace IE6 with any version of IE)

    There needs to be A SPACE between “IE” and “6” (or the number of whatever version you are trying to target). I’m not sure if this is only applicable for HTML5 but without a space it was not calling the stylesheet at all.

    Great article though. Thanks for the help.

  47. S Aswal on February 9th, 2012 at 7:27 pm

    it’s really good article, things are more clear,

    thanks a lot

  48. Ravi on February 10th, 2012 at 3:56 pm

    Excellent Article. Thank you so much.

    Why didn’t I come across this article earlier ??? Well now I found it – Thanks

  49. galerikredit on May 25th, 2012 at 6:32 am

    thanks, helpful … something that i want to find …

  50. pervaiz akhtar on January 8th, 2013 at 6:56 am

    Dear friends …it is nice to see u peoples here . i think it is a main problem that must be on focus. can it possible we define a general CSS and a general template from which we create all others applications to avoid Cross Browser Problems.

    any solution or advise will be appreciated