Geeks With Blogs
Hani Amr

Even been into the hassle of an HTML table displaying differently on different browsers ? of course every UI developer have been into it. I've found a very interesting solution to this problem.

Suppose that you have a CSS class called "TableLayout" and you want this class to have different attributes according to the client browser.

You only need to write it like that in the CSS file:

.ie .TableLayout

{

   margin-left: 15px;

}

.webkit .TableLayout

{

   margin-left: 0px;

}

This is very simple as it defines this class for Internet explorer to have a left margin of 15px, and for webkit browsers (like google chrome for example) to be with no left margin.

Final step is to include the following javascript into your page:

<script src="css_browser_selector.js" type="text/javascript"></script>

and that's it :)

For downloading the script go to this link

Cheers,

Posted on Tuesday, April 24, 2012 11:23 AM Javascript , CSS | Back to top

Copyright © H@Ni | Powered by: GeeksWithBlogs.net