Conditional Comments

catering to IE

[cfe_admin]

In an effort to cater to IE's affinity for sucking, I'm trying to use conditional comments to load two different css style sheets. One for IE, and another for compliant browsers. This is the code that I'm using in the head of my document:

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

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

For some reason the page now loads fine in compliant browsers, but loads NO css at all in IE. I'm using IE7, any thoughts?

[Fotiman]

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

Since IE is the only browser that recognizes conditional comments, it doesn't make sense to try and use them to include style sheets for non-IE browsers. Instead, just always include the stylesheet for all browsers, and use conditional comments to provide styles that override or augment the default styles.

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

For some reason the page now loads fine in compliant browsers, but loads NO css at all in IE. I'm using IE7, any thoughts?

Try this:
<link href="cfe.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="cfeie.css" rel="stylesheet" type="text/css" />
<![endif]-->

[edited by: Fotiman at 9:09 pm (utc) on Nov. 29, 2006]

[DanA]

You shouldn't do that but have a stylesheet for compliant browsers and then fixes for ie.
You have to add a space after if to have the CC working.
<!--[if !IE]>-->
<link href="cfe.css" rel="stylesheet" type="text/css" />
<!–-<![endif]-–>
---^--------^

[edited by: DanA at 9:17 pm (utc) on Nov. 29, 2006]

[swa66]

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

ie7 is tiny to be honest. ie6 isn't all that small and kinda important to get the thing to behave a bit.

We really should not apply all the things we added to IE6 to IE7 as well, it might actually work better without a lot of the IE6 stuff.

[phranque]

in case this was not absolutely clear in DanA's reply:
the html comment starts with "<!--" and ends with "-->".
i think the the basis for your problem is that you are missing somes dashes (-) in key places...

[jtara]

Why not just use mod_rewrite, matching against HTTP_USER_AGENT?

[Fotiman]

Why not just use mod_rewrite, matching against HTTP_USER_AGENT?

Not everyone uses a server that supports this. Conditional comments will work, regardless of platform.

[swa66]

Why not just use mod_rewrite, matching against HTTP_USER_AGENT?

To proof to MSFT when they seek info how many of us struggle with their poor excuse for a browser supporting CSS.

If you use mod-rewrite they don't see the additional trouble they cause in the statistics and will be less pressed to solve their bugs/features. It's all fine that IE7 is better, but for us webmasters we still face loads of trouble from an installed base that's going to be abandoned by the vendor without the users actively switching over. And when they'll fix the remaining IE7 stuff is a even bigger question.

I've heard of the intention of a webmaster (granted he's got a special niche audience where IE users are uncommon) that is planning to drop support for IE6 in his newest layout, and just display a simple line asking the users to upgrade to either IE7, Firefox or any other browser of their choice.
Wishing I could afford to do the same, my productivity would be a lot higher if I didn't have to test and modify it all every time for IE6.

Also with cached copies in a corporate environment the browser string might be not accurate for the one gettign the cached copy.