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

jitter · Accepted Answer · 2009-06-14 14:06:39Z

4

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.

edited Jun 14, 2009 at 14:06

answered Jun 14, 2009 at 13:59

jitter

54.8k11 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

instanceof me Over a year ago

The reason is that, for other browsers,  appears as an XML/HTML comment and is not interpreted.

Boris Guéry Over a year ago

I don't think, what he wants to do is if is NOT IE so if !IE is right

Elliott Over a year ago

Thanks but in firefox it still showing the overwritten style not the ff_styles

merkuro · Accepted Answer · 2009-06-14 14:18:39Z

3

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]-->

edited Jun 14, 2009 at 14:18

answered Jun 14, 2009 at 14:06

merkuro

6,1872 gold badges29 silver badges29 bronze badges

2 Comments

Elliott Over a year ago

Thanks, so how would I check that it isnt IE...rather than doing if firefox if opera etc

slosd Over a year ago

! is valid operator: msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx You can use it for styles you want to include in every browser but in IE.

Armandas · Accepted Answer · 2009-06-14 14:02:35Z

2

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

answered Jun 14, 2009 at 14:02

Armandas

2,4161 gold badge25 silver badges30 bronze badges

Collectives™ on Stack Overflow

css conditional formatting

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related