Cant define a CSS rule only for IE9 and below

Question

I want to define a CSS rule for IE9 and below ONLY so I included this line on my style sheet:

<!--[if lte IE 9]>
.gradient {
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
<![endif]-->

it didnt work. Internet Explorer 9 is not understanding it unless I take off the conditional tags.

Why is that?

Thank you.

Which conditional tags you are trying? Can you show us HTML code for it? — Mohammad Usman, Jun 29 '16 at 07:22
This seems to a duplicate of:http://stackoverflow.com/questions/6654423/target-ie9-only-via-css. If not a duplicate you can use the idea. — Deceiver, Jun 29 '16 at 07:24
Check this site https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ — Pugazh, Jun 29 '16 at 07:24
Thank you but I dont need to create a new style sheet for IE only. I want to include that line in my current style sheet. — Cain Nuke, Jun 29 '16 at 07:26
**Moderator note**: a gentle reminder to keep the tone civil and respectful. — Martijn Pieters, Jun 29 '16 at 07:51

Mohammad Usman · Answer 1 · 2016-06-29T08:39:35.087

0

You can only add HTML code inside conditional comments. Your page structure should be like this:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie9.css">
    <![endif]-->
    <body>
        // body content goes here...
    </body>
</html>

And in ie9.css you can define your css

.gradient {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}

edited Jun 29 '16 at 08:39

answered Jun 29 '16 at 07:28

Mohammad Usman

37,952
20
92
95

I knew that trick already but I want to do it within the same style sheet. – Cain Nuke Jun 29 '16 at 07:29
@CainNuke Yeah, you said you wanted to do that, but sometimes one just has to abide by the rules. – Mr Lister Jun 29 '16 at 07:33
If there is really no way to do what I intend I will give it up. But I am pretty convinced there is a way. – Cain Nuke Jun 29 '16 at 07:35

score 0 · Answer 2 · answered Jun 29 '16 at 07:32

0

Embedded the css in style tag.

<html class="ie9-fix">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <!--[if IE]>
       <style>
.gradient {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
</style>
    <![endif]-->
    <body>
        // body content goes here...
    </body>
</html>

answered Jun 29 '16 at 07:32

smirfan

26
3

Not bad, but I really dont want to mess with the html. Only the css. – Cain Nuke Jun 29 '16 at 07:33

score 0 · Answer 3 · answered Jun 30 '16 at 02:36

0

Okay, I think I found the answer. This seems to work.

@media screen and (min-width:0\0) {
gradient {-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}

answered Jun 30 '16 at 02:36

Cain Nuke

2,843
5
42
65

Cant define a CSS rule only for IE9 and below

3 Answers3