CSS

Cross Browser Compatibility

browsers-css

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,

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

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

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.

6 Comments

6 Comments

  1. Brett Widmann

    May 11, 2011 at 3:38 am

    These are helpful tips and tricks! Thanks for sharing.

  2. Jitendra

    March 21, 2011 at 10:59 am

    But when you are working on CMS, it creates so many issues….

  3. Lauranoel

    March 11, 2011 at 3:40 am

    A very good post. Nice way to resolve compatibility issues between browsers w.r.t css.

    Good Work

  4. Peter

    March 9, 2011 at 10:18 am

    this is really awesome! keep it up man:):)

    • Lavinia

      June 23, 2011 at 8:54 am

      Furrealz? That’s marvleuolsy good to know.

  5. Diana

    March 9, 2011 at 10:16 am

    Simple trick but very useful… Thx for sharing. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part