Conditional CSS file doesn't override regular CSS

Question

I am using conditional comments to link to a css file (let's call it "IEonly.css") if the IE version is less than 8. I am trying to override some properties in the regular css file. Strangely enough, IEonly.css will set new css properties correctly, but it won't override the properties in the regular CSS file!

(I am trying to make this work for IE7).

Help!

EDIT: I added an !important after the css style to see if it would help. It didn't.

Answer 1

Given multiple stylesheets (even if some are hidden from other browsers with conditional comments) then the normal rules of the cascade will apply.

Make sure your selectors are suitably specific, and that you apply the stylesheets in the right order.

Answer 2

Don't forget that you can also use the !important rule to override CSS definitions. Here is the W3C documentation on that rule.

Answer 3

Perhaps you can reorganize the stylesheets to default to IE styles and use an if !IE conditional for "good browser" overrides.

Answer 4

I added a class to the element and referenced it on the IEonly stylesheet with the class selector and the regular style sheet without. This caused the IEonly style declaration to override the regular one.

Answer 5

If you are using the same selectors in both stylesheets then you should be fine as long as you place the conditional IE stylesheet after the regular stylesheet. If you do that and your IE sheet isn't taking then you might need to write more specific selectors.

#sidebar #nav li a { }

instead of...

#nav li a { }

or

li a { }

Answer 6

Based on my own experience of similar problems I would guess that there are some bad or missing character lurking somewhere in your IEonly.css file. They can be a real pain to track down, so do the following:

1. Temporarily remove all CSS from IEonly.css, except for the part that you will use to override the normal CSS. Test to see if this works. If it does, continue to paste the code back into the file, in sections as you see fit. Hopefully you'll find the problem.
2. If your override did not work when only that part of the code existed in the file, make sure that you have the correct selectors and that the specificity is OK.

You can also try reading http://www.w3.org/TR/CSS2/cascade.html#important-rules for more information.

Can you publish some code for us to look at? That would help.