CODEWITHSUNDEEP
htmlcssconditional-statements
payling
payling

Reputation: 2524

how come my IE conditional statements do not work inside style tags?

I'm trying to use the IE specific conditional statements to alter class settings based on browser type. I was under the impression they could do this but I can't seem to get it working.

Below is a simple example, if the browser is IE the text should be blue, otherwise text should remain red.

"The browser is IE" statement in the body works fine, if I open firefox it's not there, internet explorer.. it is.

What am I doing wrong?

<html>
<head>
<style type="text/css">
.class{color:red;}
<!--[if IE]>
.class{color:blue;}
<![endif]-->
</head>
</style>
<body>
<!--[if IE]>
This browser is IE
<![endif]-->
<p class="class">Color changing text based on browser</p>
</body>
</html>

Upvotes: 1

Views: 2629

Answers (4)

Mark
Mark

Reputation: 5720

you can also do color: red;_color:blue;

Upvotes: 0

BalusC
BalusC

Reputation: 1108692

If the 'hack' is targeted on IE6 or older you can however also do as follows:

.color {
    color: red;
}

* html .color {
    color: blue;
}

Note the "* html" prefix. This is only parsed by IE6 and older. You can also use the "!important" declaration. The particular line would then be ignored by IE6 and older.

.color {
    color: red !important;
    color: blue;
}

If you have relatively a lot of them, a better practice would be to load an additional CSS stylesheet file using the conditional statement.

Upvotes: 1

Gavin Miller
Gavin Miller

Reputation: 43815

Firstly your code doesn't work - you should have the css read .color not .class

Second the conditional statements just don't work inside css. So instead write your code such that the conditional is around the IE specific styling. 

<html>
<head>  
    <style type="text/css">
        .color{ color:red; }
    </style>

    <!--[if IE]>
    <style type="text/css">
        .color{ color:blue; }
    </style>
    <![endif]-->
</head>

<body>
    <!--[if IE]>
    This browser is IE
    <![endif]-->
    <p class="color">Color changing text based on browser</p>
</body>
</html>

Upvotes: 9

Ken Pespisa
Ken Pespisa

Reputation: 22266

Apparently they don't work within the style tag. (see here: http://reference.sitepoint.com/css/conditionalcomments)

It appears you can use them within the head tag, though, and include an external CSS file if it is IE, and hide that css file if it is another browser.

Upvotes: 2

Related Questions