My new site design is looking fine in all browsers but on adobe browser lab, IE 6 and 7 aren't picking up the different background image I have specified in the IE specific stylesheet for the top of each content section (Behind where it says "Welcome to Reverb Studios Digital Design!").
So IE versions are showing the other background image with the rounded corners and it looks crap!
Here's my conditional css statement:
<!--[if IE ]> <link href="css/style_ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->
10 answers
point
@Leon Quinn; hrm, it might have been a caching issue. Locally you can force a refresh by clicking Option-refresh, or F5 on Internet Explorer. Another way is renaming your CSS file eg by appending a version number or better yet automatically appending a timestamp, which you can do automatically with PHP etc. Its probably more effort than its worth unless its part of a CMS setup though.
Good to hear things are working now though!
PSA: Thanks for the star Leon, but I dont think this is the best answer to the questionas @Alex Holt, myself and several others mentioned it was a specificity problem, where two rules had the same specificity so the later one won. Fix by:
- putting desired rule later in the cascade (in this case by moving the IE stylesheet link below the main stylesheet link)
- making desired rule more specific (eg
#contenttobody #content)
HTH
points
Hrm. You want to put the CSS declaration for your IE stylesheet AFTER your main stylesheet, otherwise it wont override properly.
Also, you know that with your conditional CSS file, you only need to add the rules that ACTUALLY change.. the rest will cascade down for you from the main CSS file...
points
Hi Leon,
I think the Cascading in CSS is the trouble—you’ve specified the IE stylesheet before your main ones, but both rules use the selector #content. When two CSS rules have the same specificity the last one wins.
You could either make the IE rule more specific (eg using body #content), move the IE stylesheet below the others in your HTML source (recommended), or both.
peace - oli
edit: hrm? inline <code> elements are interpreted in preview but not in the final post? aahMarkdown not HTML edit2: changing specificity example from star html hack
points
It does read the ie-style (according to IETester) but is it looks like you include the ie-style before the normal style, if the rules have the same specificity that means that the rule in style.css owns the one in style_ie.css. So, inheritance problem?
point
@Leon Quinn "Except that I need to repeat the whole stylesheet rather than just the bits that change"
By default IE will get all the styles from your main stylesheets too. It will also get any extra rules from your IE-only stylesheet. These should only be rules that override your main styles which IE cant handle (like the box background in your original problem).
This means that for example you dont need to define all the CSS rules for #content again in styles_ie.css. Only the different part will be sufficient. That means you can cut the current 20-odd lines of #content declarations in your styles_ie.css to this:
#content {
background-image: url(../images/content_top_ie.gif); /* Change for IE */
}
All the other properties will be inherited from your main stylesheets. If you click on the #content div in Firebug you can see all the styles being applied (the cascade). If youre declaring things multiple times theyll show up as crossed out, eg you already declare a font-family on body, so this will automatically be inherited by #content, so specifying it again there doesnt actually do anything (apart from give you more to type :)
points
Guys works perfectly now after moving the IE slylesheet lower than the normal one thanks. Except that I need to repeat the whole stylesheet rather than just the bits that change, weird!?
points
@Oli I had done all that and it looked like it wasn't working but I think it was a problem with Adobe Browser lab. All is fine now thanks!
points
.... could you use conditional CSS rules? The you could have everything in one stylesheet? (http://www.positioniseverything.net/articles/cc-plus.html ) anyway FWIW
points
Alright, to make it short just put the ie specific stylesheet after your styles like this:
<!-- CSS Stylesheets -->
<!--[if IE]> <link href="css/style_ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->
That should solve the problem. Just in case you forgot, please read more about how cascade works in CSS.
:)
