Possible <!--[if IE 5]> conflict with stylesheets

[nadsab]

Hi,

I’m kind of rusty at web design, very rusty at CSS, and catching up to speed been away from it for years. I’m designing a new css based site and included the below conditional comments in my head, to re direct from stylesheet main to a separate .css file for IE 5 and 6 hacks – fixes for column positioning and to fix some alignment issues that only IE has problems with.

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

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

My question is this. In my main external style sheet, I have CSS formatting for a column in a site, that I am told works on all browsers except IE (excepting the very latest IE browsers, I think). And the above links to the IE hack style sheets (the sheets themselves) contain css for older IE browser versions for the formatting of the same column in the main style sheet (and another bug). If there is corresponding but differing css in the main style sheet for the same columns, using the same id’s or tags for those columns, as are in the IE hack style sheets, will IE read both the hack style sheet, and the formatting in the main style sheet and a conflict will be caused between using the same ID’s or tags in the two separate style sheets? Or do the conditional comments: <!--[if IE 5]> automatically force that any id or tag or class or whatever read in the hack style sheet over ride and or ignore the same tags in the main style sheet?

Thanks for any insights on this.

[encyclo]

CSS uses a cascade, so you can override declarations in your main CSS file with different declarations in the subsequent file for IE.

One thing to note: there is no IE5 any more, it has (thankfully!) disappeared from the scene. So you only really need to worry about IE6. If you have to use a separate stylesheet for IE6, then first make everything work in IE7+ and other browsers, then apply a stylesheet targetting IE6 specifically with just the overrides you need to make it work.

[swa66]

Try:

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

I'd avoid "

<!--[if IE]>

" and use "

<!--[if lte IE 7]>

" or "

<!--[if lt IE 8]>

" instead as IE8 in all likelihood will not need your fixes to start with.

If often use

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

If you do it like that the settings in the IE6.css and IE7.css are overrides on the standard css file.
So if you want to unset something set in the main style, you actually need to set it back to the default value.

Specificity is what controls which of the the statements in your different expressions win when you have conflicts. (Since they are all "author" normal declarations)

See
[w3.org...]
and
[w3.org...]

If specificity is the same: the last one to set it wins, so order is important.

[nadsab]

Thanks encyclo.

So when you say:

CSS uses a cascade, so you can override declarations in your main CSS file with different declarations in the subsequent file for IE.

Do you mean that I don't need to create any overrides in the main CSS?

If so, does that mean that the <!--[if IE 5]> or <!--[if IE6]> tags or whatever, force any id's tags, class selectors, etc which exist in the hack css to be ignored in the main css? I'm learning the cascade concepts fairly well, just wondered, since the conditional comments are not part of the css specification (I don't think).

For a specific example of what I mean, in one of my hack files, I have:

@charset "utf-8";
/* place css fixes for all versions of IE in this conditional comment */
.primaryLayout #sidebar1 { padding-top: 30px; }
.primaryLayout #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

Will the above IE6 or IE5 hack css combined with the conditional comment tag in main.css cause any and all .primaryLayout #sidebar1 and .primaryLayout #mainContent selectors to be completely ingnored in main.css?

[nadsab]

Thanks swa66, I'll study the above links you posted.

Quick question, does

<!--[if lte IE 7]>" or "<!--[if lt IE 8]>

mean - if not IE7 or if not ie8?

[swa66]

lte: less than or equal
lt; less than

they both target all versions of IE earlier than IE 8

If you go back to the example I gave and assume the style.css has e.g.:

a {
 color: inherit;
 text-decoration: none;
}

and IE6.css has:

a {
 color: black;
}

Then the color will be set to black and no text decoration in IE6

Now if you have in your html something like

<a href="#" class="special">hello</a>

And you have in your style.css:

.special {
 color: inherit;
 text-decoration: none;
}

and IE6.css has:

a {
 color: black;
 background: red;
}

In IE6, that <a> will try (and fail) to inherit its color and it will loose the text decoration. The specificity of 0.1.0 can't be matched by the specificity of 0.0.1 of what's in the IE6.css file...

All these things are evaluated only when there is a conflict. So in IE6 the background will still turn red.

Hope this helps understanding it.