Member Avatar

Hello,

I'm trying to use conditional stylesheets to create a separate stylesheet for IE, but the stylesheets will not load for me. This is what I have:

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

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

I have also tried:

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


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

With the first one, none of the styles load. My page has no CSS. With the second, only the standard one loads, the IE one does not. What am I doing wrong here?

Thanks in advance.

Recommended Answers

The only problem I see is with the first one. Targeting non IE browsers should be like

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

If the second example isn't working, something else must be wrong.

Jump to Post

The IE one is conditional because IE is the only browser that doesn't ignore it like a comment. The other browsers see it is a comment and continue on with their business of rendering the rest of the page.

Jump to Post

The issue is most likely your style sheet, either the link is wrong, or you are not overriding the styles correctly.

Are you setting things with !important on them? like this:

div{background:#FFFFFF !important;}
Jump to Post

All 10 Replies

The only problem I see is with the first one. Targeting non IE browsers should be like

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

If the second example isn't working, something else must be wrong.

Member Avatar

I just tried changing that, all that does is allow the default stylesheet to load. The IE one still doesn't load.

It seems to me that adding these conditional comments is just commenting out the stylesheet link. Am I missing something here?

The IE one is conditional because IE is the only browser that doesn't ignore it like a comment. The other browsers see it is a comment and continue on with their business of rendering the rest of the page.

The issue is most likely your style sheet, either the link is wrong, or you are not overriding the styles correctly.

Are you setting things with !important on them? like this:

div{background:#FFFFFF !important;}

According to quirksmode, the syntax for !IE should be:

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

You wouldn't happen to have a URL we could check, would you?

Member Avatar

I just tested it in IE 9 and it's working. I had been testing it in IE 10. I never even thought to test it in another version of IE.

So is this not possible in IE 10? How would I go about doing this for IE 10?

Member Avatar

Sorry, just did a google search about IE10 and found out that conditional comments are not supported. I just assumed IE10 would support it like the rest. Looks like I'm going to have to find another way around this.

Yea, that's correct. Its been dropped by IE10. However, you could always have the browser emulate IE9 behaviour, but I'm not saying that you should.

Here is more information on MSDN about that: Conditional Comments

It may be that your CSS could be wrong, or could be done differently. Unless it's a IE10 bug which happens also. Start another thread with the CSS issue. I'm sure we could help.

Member Avatar

Okay, I will look into that, thanks.

I'll look and see if I can get it working by just adjusting the CSS first.

Thanks for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.