How to solve Browser Compatibility issues
What are browser Compatibility issues?
I will try to explain it in the simplest possible way. Suppose you make any website and it looks perfectly alright in your default browser. Now you try opening the same website in some different browser, and you see some difference in its appearance. You again open the same website in a third browser and it again looks a bit different (as compared to the other two browsers). Now you start wondering, how to make the website appear same in all the browsers.
Yes.. You are now dealing with browser compatibility issues. It is the most common problem that every web-designer goes through. Every Website Developer / Designer spends most of his/ her time struggling to solve browser compatibility issues.
What Causes Browser Display Differences?
- Different Browsers
- Different Browser Versions
- Different Computer Types
- Different Screen Sizes
- Different Font Sizes
- HTML Errors
- Browser Bugs
For a detailed description on each of the above listed topics, please visit this link.
How to solve browser Compatibility issues?
There are a set of rules and regulations that you need to follow in order to make your website look consistent across all the browsers, like using a correct DOC type, Validating your HTML and CSS etc. But here I am not going to discuss about all these rules.
Today I am going to share two major utilities with you which will solve almost all your browser compatibility issues. They are:
- Reset CSS
- CSS Browser Selector javascript
Reset CSS
Normally every browser assigns some default styles (like default line heights, margins, paddings, and font sizes, headings, and so on) to HTML elements. Because of this default styling adapted by the browsers, every html document appears to be a bit different in different browsers.
The use of Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a levelled baseline across all major browsers and providing a sound foundation upon which you can explicitly declare your styles.
There are many reset style-sheets available on the internet today. You can find a good collection of different reset CSS files here. You can download and use any reset CSS stylesheet depending on your choice and requirement. Alternatively you can download my choice of reset CSS as a separate stylesheet; or copy and paste the following stylesheet code on top of your default stylesheet.
@CHARSET "UTF-8";
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,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;
position:relative;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
Go to this link for more information on reset CSS.
CSS Browser Selector Javascript
CSS Browser Selector is a very small javascript with just one line and less than 1kb which gives you the ability to write specific CSS code for each operating system and each browser.
By including this javascript file in your HTML document, you can assign a class for a specific browser, and you are free to use your own style rules for that particular browser.
Click here to see a demonstration of CSS Browser Selector Javascript.
Lets assume a situation that you have created a webpage with font size of 16px.This web page appears to be the same in all the browsers, but in safari browser, you feel that the font size appears to be a bit bigger. To solve this issue, you can include the CSS Browser selector javascript between your <head> and </head> tags like this:
<head>
<script type="text/javascript" src="js/css_browser_selector.js">
</head>
After this, you can define the style rules for safari browser like this which will solve your issue.
.safari body{
font-size: 15px;
}
As you can see the code above that we have defined a seperate class “.safari” for the safari browser. In the same way you can define the class “.ie” for Internet Explorer, and “.opera” for Opera browser. Following list shows you all the possible browser codes which you can use as classes for that particular browser.
- ie — Internet Explorer
- ie8 — Internet Explorer 8.x
- ie7 — Internet Explorer 7.x
- ie6 — Internet Explorer 6.x
- ie5 — Internet Explorer 5.x
- gecko — Mozilla, Firefox (all versions), Camino
- ff2 — Firefox 2
- ff3 — Firefox 3
- opera — Opera (All versions)
- opera8 — Opera 8.x
- opera9 — Opera 9.x
- opera10 — Opera 10.x
- konqueror — Konqueror
- webkit — Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
- safari — Safari, NetNewsWire, OmniWeb, Shiira
- safarii3 — Safari 3.x
- chrome — Google Chrome
Similar to this you can specify the class for different operating systems also. Following list shows you all the possible operating system codes which you can use as classes for that particular operating system.
- win — Microsoft Windows
- linux — Linux (x11 and linux)
- mac — Mac OS
- freebsd — FreeBSD
- ipod — iPod Touch
- iphone — iPhone
- webtv — WebTV
- mobile — J2ME Devices (ex: Opera mini)
For getting more information on CSS Browser Selector javascript, go to its homepage. To download Browser selector javascript click here
Vikram Mehta's Blog 
the best one i’ve read , do you believe this is the future?
July 26, 2010 at 8:39 am
I have read the css browser selector and i am confused on two things (First of all i am using Joomla and the menu on the left goes behind the text on IE7)
1. Where exactly am i going to paste the .js file?
2. Where exactly am i going to create the class files. Is it on index.php or some other file?
Please please help…any help..thanks….
January 30, 2011 at 11:42 pm
Hi You can put the js file in the head section of the document. (Inside the <head> and </head> )
And you can create the classes in the css stylesheets. You can create a separate stylesheet, with all the classes, defined only for resolving the browser compatibility issues.
You can write an embedded style also (Inside the <head> and </head> ) using the <style type=”text/css”> and </style>
.
February 1, 2011 at 10:17 am
great…….its one the nice trick to solved browser compatibility issues. its awesome.
May 10, 2011 at 12:43 pm
hi………the code u have given me do u think that it will support all browser. pls guide me
January 28, 2012 at 11:08 am
pls guide me
February 9, 2012 at 4:30 pm
hi
February 9, 2012 at 4:28 pm
pls tell me how can i use this code
February 9, 2012 at 4:29 pm
Just copy it to your style sheet and see what happen. I think u can solve.
April 11, 2012 at 10:31 am
very good blog bro,
April 26, 2012 at 12:06 pm
hello,
I developed a site,it looks better in google chrome but some variations in internet explorer.Please suggest the ways to resolve it .
June 11, 2012 at 7:21 pm
Can you Provide your site url. Thanks.
June 11, 2012 at 9:57 pm
thsnks !!!
December 5, 2012 at 12:23 pm
Thanks a lots….it’s works…
February 18, 2013 at 5:09 pm
Awesome work man.. Thanks a lot..
February 18, 2013 at 7:07 pm
Pingback: How to Solve Browser Compatibility Issues by Vikram Mehta | Dawning Day: Right Another Day
I really like what you guys are up too. Such clever
work and coverage! Keep up the amazing works guys I’ve incorporated you guys to my own blogroll.
June 25, 2013 at 8:55 am
its just the anchor tag link thatr does not open well in IE8 but opens in firefox. what solution do u suggest?
June 25, 2013 at 10:18 am
Hello everybody, here every person is sharing such knowledge, therefore it’s pleasant to read this weblog, and I used to go to see this web site everyday.
June 29, 2013 at 5:53 pm
Having read this I believed it was really enlightening.
I appreciate you finding the time and energy to put this informative article together.
I once again find myself personally spending a lot of time both reading and posting comments.
But so what, it was still worth it!
July 7, 2013 at 9:57 am
I am actually delighted to read this blog posts which
consists of tons of helpful data, thanks for providing these statistics.
July 19, 2013 at 10:54 pm
Why users still make use of to read news papers when in this technological globe everything is
presented on web?
July 21, 2013 at 8:24 am
What’s up to all, the contents present at this web site are genuinely awesome for people knowledge, well, keep up the good work fellows.
July 30, 2013 at 12:34 am
Howdy! I know this is kind of off topic but I was wondering which blog platform are you using for this site?
I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be awesome if you could point me in the direction of a good platform.
August 1, 2013 at 3:20 pm
Thanx bro….dats just awesome!!
November 19, 2013 at 10:52 pm
hi i have problem in input type i choice file but it not working in chrome but work another browser what can i do??
August 2, 2015 at 4:36 pm