While creating a web design, most of the designers face a very common problem of Cross Browser Compatibily of  CSS in different browsers like IE6, IE7, IE8, firefox, opera, safari, netscape navigator, etc. It’s really very frustrating when you spend hours in creating a design and after completion you find out that your designs in not working properly in any one or two of the browsers.

This problem usually persists in Internet Explorer 6 and Opera browsers. Especially in IE6, their are many compatibility issues.

For example:
your drop down menu is working very much fine in firefox but not in IE6 or the main wrapper and the sidebar may overlap each other, etc.

So, today we are going to discuss How to create a Cross Browser Compatible Css Code for almost all the browsers. You need at least two browsers for comparison i.e. IE6 and Firefox.
If you don’t have, you can check your web page preview on BrowserShots.org

I choose IE6 as it is the most common browsers for the window users. Here are going to discuss on the compatibility of a blogger template.

 

Step 1: Lets check out the compatibility issues of our blogger template using BrowserShots.org

Enter your blog URL and tick the browsers in which you want to test How you blog looks in various browsers.

 

Step 2: We assumes that we have find out the compatibility issues…

Let’s see an example below:

Generally, we use this CSS code,

#example {
float : left;
width : 170px;
margin-left : 5px;
}

We assumes that the above code is incompatible with Internet Explorer 6.

So, we need to modify the code something like this…

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

Here above, the first block of css is for Internet Explorer and the second block is for other browsers like Firefox, Opera, etc.

It seems to be very simple yet but it becomes difficult when you have large code to edit and you have to find out the particular css code for editing.
So, we’ll do this same thing with the child selector command which IE can’t understand.

The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code looks like this…

#example{
float : left;
width : 170px;
margin-left : 5px;
}

html > body #example {
width : 185px;
margin-left : 3px;
}

The above blue colored code is for IE versions and the red colored code is for other browsers.

So with a simple child selector commands, we can make Cross Browser Compatible code for all browsers. Every time when u create a new template, try to check whether it is compatible with other browsers or not. and make changes to the CSS code to suit that browser.

Hope, this little trick solves the cross browser compatibility issues for you.

Author

Founder of DesignsTutorial.com, an author, blogger, designer, and SEO expert who designs and develops websites as a freelancer. Offcourse, you can follow me on Twitter @designstutorial.