Is there any way to write css such that particular style applies to a particular browser?

Question

I have external CSS in my project and it contains all the styles for the site, the site works well with FF but gets bad and mad in IE (as-usual).

So, Is there any way to write css such that particular style applies to a particular browser?

If I have a class say:

.col2{ width:237px; }

How can I edit the above class to apply with different width in IE and FF?

NOTE: I DONT NEED JAVASCRIPT TO IDENTIFY THE BROWSER.

Answer 1

http://www.quirksmode.org/css/condcom.html

Conditional comments are your friend!

If you just need it to work in IE6 you could you the * html 'hack':

define your CSS:

.acol {
width: 100px;
}

then define a style for IE6 to override:

* html .acol {
width: 200px;
}

The second part for IE6 always needs to come AFTER the original declaration

Answer 2

The best way is to specify specific css file(s) for IE using conditional comments: http://www.quirksmode.org/css/condcom.html

Another way are CSS hacks but they are messy and usually not welcome (nowadays): http://www.webdevout.net/css-hacks

Answer 3

I think Paul Irish came up with the most elegant solution: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Answer 4

There is a jQuery plugin called the CSS Browser selector.

You basically put tell the CSS which browser it is for, without the need for conditional comments or anything:

.ie .myDiv 
{background-color: #f00;}

.webkit .myDiv
{background-color: #00f;}

It's really easy to setup and use :)