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:
and that's it :)
For downloading the script go to this link
Cheers,