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

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.

Tags: ,

Sort by:   newest | oldest | most voted
Zilus
Guest
6 years 3 months ago

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

Cheers!

Grün Weiss
Guest
6 years 3 months ago

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

Lewis Nyman
Guest
6 years 3 months ago

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
Guest
6 years 3 months ago

good article thanks lot

Rachel
Guest
6 years 3 months ago

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

Mario Giambanco
Guest
6 years 3 months ago
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… Read more »
S
Guest
S
6 years 3 months ago

Internet Explorer 6 has 215

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

JayTurn
Guest
6 years 3 months ago

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
Guest
6 years 3 months ago

* {
margin: 0;
padding: 0;
}

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

Jan
Guest
6 years 3 months ago

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
Guest
Dr. Q
6 years 3 months ago

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
Guest
6 years 3 months ago

very useful.

thank you very much.

piyashrija
Guest
6 years 3 months ago

nice article..luv it

Shabir Gilkar
Guest
6 years 3 months ago

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

From:
Shabir Gilkar
Kashmir Asia

Design Dazzling
Guest
6 years 3 months ago

its very nice and clear article .. thanks buddy

Omer Greenwald
Guest
6 years 3 months ago

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

gavin
Guest
gavin
6 years 3 months ago

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

Great article thanks

Ramsez Stamper
Guest
6 years 3 months ago
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… Read more »
William G.
Guest
6 years 3 months ago

“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
Guest
6 years 3 months ago

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
Guest
6 years 3 months ago
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… Read more »
Edward
Guest
6 years 3 months ago

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
Guest
nik
6 years 3 months ago
„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… Read more »
William G.
Guest
6 years 3 months ago

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
Guest
6 years 3 months ago

Very Useful Post, Thanks for this :-)

Tim Igoe
Guest
6 years 3 months ago

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
Guest
rohnn
6 years 3 months ago

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

Allows to install multiple version of IE on one machine.

mintocity
Guest
6 years 3 months ago

Excellent well narrated article..

ken shan
Guest
6 years 3 months ago

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

redman
Guest
6 years 3 months ago

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
Guest
6 years 3 months ago

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

Jason
Guest
6 years 3 months ago
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… Read more »
Charlie
Guest
6 years 3 months ago

Um i am here for tips on crossbows and am disappointed

Grad
Guest
6 years 3 months ago

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

Trok
Guest
6 years 3 months ago

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
Guest
6 years 3 months ago

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

Jenny
Guest
Jenny
6 years 3 months ago

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
Guest
6 years 3 months ago

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

has anyone tried browserlab in dreamweaver cs5?

CSSReX
Guest
6 years 3 months ago

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

Evan Skuthorpe
Guest
6 years 3 months ago

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

Sachin
Guest
6 years 3 months ago

very useful resources..thanks

Eru
Guest
6 years 3 months ago

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

Techwatch
Guest
6 years 3 months ago

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

Marc
Guest
Marc
6 years 3 months ago
Orik
Guest
Orik
6 years 2 months ago

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
Guest
6 years 17 days ago

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
Guest
5 years 5 months ago

Excellent article! Love your site!

Abdul Baquee
Guest
5 years 3 months ago

Its a really cool post.
I like it

thank you for posting these types of articles.

uttam
Guest
uttam
5 years 29 days ago

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

so plz help me

RAHUL
Guest
RAHUL
5 years 21 days ago

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
Guest
dshivakumar
4 years 11 months ago

Good to read such valuable information. Thanks.

Jaco
Guest
4 years 6 months ago

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
Guest
S Aswal
4 years 6 months ago

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

thanks a lot
:)

Ravi
Guest
Ravi
4 years 6 months ago

Excellent Article. Thank you so much.

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

galerikredit
Guest
4 years 3 months ago

thanks, helpful … something that i want to find …

pervaiz akhtar
Guest
pervaiz akhtar
3 years 7 months ago

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

wpDiscuz