Conditional Comment?

[Sarah Atkinson]

I have never written conditional comments before. Before I've just put my nose to the ground and made compromises to make it work in all browsers. I am usually pretty flexible with the way things look and can accept minor discrepancies between browsers. But I have finally come across a problem where my styles just will not work in both IE and FF.

I want to attach 2 conditional statments that serve up 2 seperat stylesheets for IE and FF.

How do I write this statement?

[encyclo]

Rather than two separate stylesheets, one for each browser, you should always have a primary stylesheet for all browsers (using the usual linking method), and then you should subsequently include a second stylesheet for IE only which will override or modify the styles in the main stylesheet. This means that you cater for everyone (Firefox, Opera, Safari etc.) and just correct the specific problematic rules for IE.

A caveat: using IE Conditional Comments means a certain amount of long-term verification of the site - if a later version of IE comes out, the override rules may or may not be needed.

So after your main stylesheet, you can either target all IE versions with this:

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

Or you can decide that you want to target only IE6 and below, or IE7 and below (if you're hopeful than an IE8 would fix the bugs!):

[b]<!--[if lte IE 7]>[/b]
<link rel="stylesheet" type="text/css" href="/path/to/ie-styles.css">
[b]<![endif]-->[/b]

(

lte

= "less than or equal to")

[b]<!--[if lt IE 7]>[/b]
<link rel="stylesheet" type="text/css" href="/path/to/ie-styles.css">
[b]<![endif]-->[/b]

(

lt

= "less than")

You'll find some more detail in this earlier thread in the CSS forum:

Microsoft Conditional Comments [webmasterworld.com]

[Sarah Atkinson]

for IE I wasn't thinking about a work around for the bug but rather a redesign of the parts so that it would look ok--not great but ok--in IE.

However when I did the [if] for IE the the IE displayed styles from both stylesheets--which was really weird looking. So how do I get IE to ignore the other one? I actually have 4 stylessheets.
One has the styles for the stuff like <p> <h1> <h2>

then the others have the ones for user defined styles. I have a complex set of CSS menus and each menu has it's own CSS for

[SuzyUK]

So how do I get IE to ignore the other one?

HI Sarah, normally you would just use the cascade and in your IE sheet, which you would call after the main one, using a downlevel-hidden CC you would explicitly overrule styles from previous sheets you want to change/do differently

but you can actually use the two different types of CC's to feed separate stylesheets (= my AHA moment ;)) one to IE / another to everyone else, and it shouldn't matter the order of the cascade.

<![if !IE]>
<style type="text/css" media="screen">
@import "non-ie-styles.css";
</style>
<![endif]>

<![red]--[/red][if IE]>
<style type="text/css" media="screen">
@import "ie-only-styles.css";
</style>
<![endif][red]--[/red]>

The first comment is a downlevel-revealed and is read by all browsers - NON-IE browsers don't see it as a comment so they parse and apply the content inside it. IE reads it too but it also reads the [expression] part and sees it's not for it - !IE = if not IE, so it does not apply it.

The second comment is downlevel-hidden (note the red dashes as the difference) and is hidden from all NON-IE Browsers, So only IE will actually read this one, then in the expression part you place whichever version suits, in my sample I've simply added all IE's (above4) so that code should target all IE's or Everyone Else.

[Robin_reala]

Of course, when IE8 comes out and fixes all the bugs that prevent your current solution working (hah ;)) it'll still get the old stylesheet. Come that time though you can adjust your CC to affect IE7 and lower only.