Apr 30 2010

The Importance of Cross Browser Compatibility: Tips and Resources

Advertisement

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

Browsershots
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.

Browsershots

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

Browser Sandbox

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

Browsrcamp

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.

Validate

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 { 
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img { 
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
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="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

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" />
<![endif]-->

Target Specfic Versions of IE

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

(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
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.

iPhoney

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

MobiReady

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
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.

Mobify

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

MoFuse

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.

About the Author

Comments and Discussions
  • Zilus, 30 April 2010

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

    Cheers!

  • Grün Weiss, 30 April 2010

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

    • Lewis Nyman, 30 April 2010

      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

  • esranull, 30 April 2010

    good article thanks lot

  • Rachel, 30 April 2010

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

  • Mario Giambanco, 30 April 2010

    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.

    -Mario

  • S, 30 April 2010

    Internet Explorer 6 has 215

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

  • JayTurn, 30 April 2010

    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.

  • Matthijn, 30 April 2010

    * {
    margin: 0;
    padding: 0;
    }

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

    • Jan, 02 May 2010

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

      *{
      margin:0;
      padding:0;
      border:0;
      text-indent:0;
      list-style:none;
      -moz-outline:none;
      outline:none;
      outline-color:none;
      }

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

      • Dr. Q, 03 May 2010

        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.

  • designfollow, 30 April 2010

    very useful.

    thank you very much.

  • piyashrija, 30 April 2010

    nice article..luv it

  • Shabir Gilkar, 30 April 2010

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

    From:
    Shabir Gilkar
    Kashmir Asia

  • Design Dazzling, 30 April 2010

    its very nice and clear article .. thanks buddy

  • Omer Greenwald, 01 May 2010

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

  • gavin, 01 May 2010

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

    Great article thanks

  • Ramsez Stamper, 01 May 2010

    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., 01 May 2010

      “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, 07 May 2010

        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, 04 May 2010

      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.

  • Edward, 01 May 2010

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

    http://menacingcloud.com/?c=cssMediaQueries

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

    Thanks, great article!

  • nik, 01 May 2010

    „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

  • William G., 01 May 2010

    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!

  • Sunny Kumar, 02 May 2010

    Very Useful Post, Thanks for this :-)

  • Tim Igoe, 02 May 2010

    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)

  • rohnn, 02 May 2010

    TO IE Tester, I prefer :
    http://tredosoft.com/Multiple_IE

    Allows to install multiple version of IE on one machine.

  • mintocity, 02 May 2010

    Excellent well narrated article..

  • ken shan, 02 May 2010

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

  • redman, 03 May 2010

    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.

  • Jordan Walker, 03 May 2010

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

  • Jason, 03 May 2010

    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.

  • Charlie, 04 May 2010

    Um i am here for tips on crossbows and am disappointed

  • Grad, 04 May 2010

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

  • Trok, 04 May 2010

    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.

  • Kaffebønner, 04 May 2010

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

  • Jenny, 04 May 2010

    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. http://www.w3schools.com/browsers/browsers_stats.asp

  • sedunia, 05 May 2010

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

    has anyone tried browserlab in dreamweaver cs5?

  • CSSReX, 06 May 2010

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

  • Evan Skuthorpe, 06 May 2010

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

  • Sachin, 12 May 2010

    very useful resources..thanks

  • Eru, 12 May 2010

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

  • Techwatch, 13 May 2010

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

  • Marc, 24 May 2010

    Opera has a desktop tool to emulate Opera Mini.

    http://dev.opera.com/articles/view/opera-mobile-10-widgets-mobile-emulator-desktop/

  • Orik, 28 May 2010

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

    browserseal.com

  • Chelsie Freeby, 08 August 2010

    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.

  • Ethan, 16 March 2011

    Excellent article! Love your site!

  • Abdul Baquee, 09 May 2011

    Its a really cool post.
    I like it

    thank you for posting these types of articles.

  • uttam, 28 July 2011

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

    so plz help me

  • RAHUL, 04 August 2011

    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.

  • dshivakumar, 23 September 2011

    Good to read such valuable information. Thanks.

  • Jaco, 28 January 2012

    PLEASE NOTE!

    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.

  • S Aswal, 09 February 2012

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

    thanks a lot
    :)

  • Ravi, 10 February 2012

    Excellent Article. Thank you so much.

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

  • galerikredit, 25 May 2012

    thanks, helpful … something that i want to find …

  • pervaiz akhtar, 08 January 2013

    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

search form
 
image description image description