use of conditional statements in CSS file?

[Ritesh_4]

Hello, is it do-able to write something like the below in a css file if I want to apply different styles based on the browser loading the css file? Currently I have a website which is rendered correctly in FF and Chrome, but nor in IE 8 (and prev. versions), although in IE9 it is ok.

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }

[JorgeM]

I havent had the need to do this exactly in this manner you are describing, but the way I would go about this using javascript to determine the type of browser the user is using, then apply the appropriate styles via javascript as well.

[BMXDad]

No ... but you could use css hacks. If your looking for diffent style sheets for each browser, then a conditional on the link is better ... IMO

<!--[if lt IE 7]> <link rel="stylesheet" href="Content/IE7.min.css" /> <![endif]-->

But before doing that, you might want to see if you can solve the problem either with diffent css or with some minor ie spacing hacks.

This should work for all IE (pretty sure it still does). Just duplicate a class for IE

html>body someClass {
Something for IE here: 30em
}

[EvolutionFallen]

You cannot do this in a raw CSS file -- this is why CSS hacks exist (which I try to avoid).

You can use IE conditional comments if you want to target IE specifically. I like this article at quirksmode for explaining usage.

Lastly, you can use your server-side language or JavaScript to detect and link the correct CSS file, as JorgeM suggested.

[JorgeM]

I didn't recommend the IE conditional statements because lordrt needs to target non-IE browsers as well. The conditional statements can't be used for specific non-IE browsers.

If you want to target all non IE browsers as a whole, you can still use conditional comments.

[almostbob]

perhaps an em or fractional em(.9em) could/would/should self adjust to browser metrics, user preference, something like

#container {top: 0.7em;}