Conditional MSIE comments not over-riding property

Forum Moderators: not2easy

Message Too Old, No Replies

Conditional MSIE comments not over-riding property

Setting color twice, 2nd time inside [if] statement, not changing - help?

badbadmonkey

8:29 am on Jun 23, 2009 (gmt 0)

Am trying the below code:


background-color: green;
<!--[if IE]>
background-color: red;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
<![endif]-->

I.e. if it's transparent in MSIE, I want it to be red not green.

The color however is green. The opacity filter is applied as expected.

I am expecting MSIE to read the "red" statement, and override anything preceding in the cascade.

Why is this not working?

birdbrain

8:53 am on Jun 23, 2009 (gmt 0)

Hi there badbadmonkey,

the IE conditional comment must be separated from the main stylesheet in this manner...


<style type="text/css">
body {
background-color: green;
}
</style><!--[if IE]>
<style type="text/css">
body {
background-color: red;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
}
</style>
<![endif]-->

...and always be placed after it.

birdbrain

badbadmonkey

8:57 am on Jun 23, 2009 (gmt 0)

Hold on, sorry, I should have said, this is an embedded stylesheet, not external - shouldn't the conditional comment work in that manner?

I know they don't work in external stylesheets.

jameshopkins

8:59 am on Jun 23, 2009 (gmt 0)

@badbadmonkey, remember that you need to copy the 'filter' property declaration and prepend the property name with '-ms-' for IE8 (e.g '-ms-filter:whatever').

badbadmonkey

9:08 am on Jun 23, 2009 (gmt 0)

?
Works fine in IE8...?

jameshopkins

9:20 am on Jun 23, 2009 (gmt 0)

My bad; I forgot that IE8 actually renders a 'filter' value without the need for the prefix - which goes against what they've stated in several whitepapers, I hasten to add.

birdbrain

9:56 am on Jun 23, 2009 (gmt 0)

Hi there badbadmonkey,

...I should have said, this is an embedded stylesheet, not external -
shouldn't the conditional comment work in that manner?

The example that I provided is an embedded stylesheet.
Did you mean inline styling?

If so you would need to do it like this...


<!--[if !IE]><!-->
<body style="background-color:green">
<!--<![endif]--><!--[if IE ]>
<body style="background-color:red;filter:alpha(opacity=75);">
<![endif]-->

birdbrain

badbadmonkey

10:04 am on Jun 23, 2009 (gmt 0)

No I meant embedded. I thought you could use conditional HTML within an embedded stylesheet, just not an extenal one. I take it I'm wrong and that's the problem.

Thanks all.

swa66

11:49 am on Jun 23, 2009 (gmt 0)

is actually a html comment ( ), so it only works where you have html, not inside CSS.
Now inside that comment you can add html. Inside that html you can add e.g. embedded css or links to external stylesheets,

e..g to use external stylesheets:


  <link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="/ie6.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->

e.g. to include Javascript for legacy IE versions:

or you can add html code like:


...
  <body>
<!--[if lt IE 8]>
    <h1 id="legacybrowser">Upgrade your browser!</h1>
<![endif]-->
<!--[if IE 8]>
    <h1 id="IE8">Congrats for keeping your browser current!</h1>
<![endif]-->
...

I'd be very careful with targeting IE8 along with IE6 and IE7, it's a different beast from IE6 and IE7.