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,