css conditional formatting

Question

I have the below code to check if the user are using IE7...and it needs to over ride the .web_info style. If not IE7 it uses the default style, if its not IE at all it will use the ff_styles.css. This doesnt seem to be working.

<link rel="stylesheet" type="text/css" href="../styles.css">


<![if !IE]>
<link rel="stylesheet" type="text/css" href="../ff_styles.css">
<![endif]>

<![if IE 7]>
<style type="text/css">
.web_info
{
left: 450px;
top: 200px;
width: 300px;
height: 60px;   
}
</style>
<![endif]>

Any suggestions? Thanks

Answer 1

Shouldn't this look like

<!--[if IE 7]>
..
<![endif]-->

and

<!--[if !IE]>
...
<![endif]-->

Note that

<!--[if !IE]>

should never yield true as these Conditional comments only get interpreted by IE.

Answer 2

Conditional comments are IE specific and therefore " <![if !IE]> " is not a valid instruction for firefox or any other browser. Additionally I would suggest you try the following syntax:

<!--[if IE 7]>
<style type="text/css">
.web_info
{
left: 450px;
top: 200px;
width: 300px;
height: 60px;   
}
</style>    
<![endif]-->

One final note on my part: Since IE7/IE8 are mostly standard compliant, these CSS hacks should be avoided, if possible.

Update: Thanks to slosd I stand corrected! According to " Supporting IE with conditional comments " you can use the following to hide something from IE:

<!--[if !IE]>-->
do something; IE will ignore this, other browsers parse it
<!--<![endif]-->

Sorry for the inconvenience I caused!

Full working example:

<link rel="stylesheet" type="text/css" href="../styles.css">

<!--[if !IE]>-->
  <link rel="stylesheet" type="text/css" href="../ff_styles.css">
<!--<![endif]-->

<!--[if IE 7]>
  <style type="text/css">
  .web_info{
    left: 450px;
    top: 200px;
    width: 300px;
    height: 60px;   
  }
  </style>
<![endif]-->

Answer 3

Don't check if the browser is not IE, check if it is IE7 then if it is IE and then fallback for default. More info: http://www.quirksmode.org/css/condcom.html