styles from "screen" css appear in print

[spirelli]

I have different style sheets for screen and print media (there is a css with text sizes for all media).

display: none; in the print style sheet works perfectly.
However, when I print a lot of the styles from the screen css appear, even if I specify something different in the print css. For example I've set all text to black in the print style sheet, but it continues to be in colours when printed. What is the reason?

Would be great if someone could have a look and shed some light.
<>
Print style sheet: 00_print.css
Screen stylesheet: 03_default.css
All: 01_text_sizes.css

I thought only the "print" and "all" styles would appear in print but not the "screen" styles. Many thanks.

[edited by: SuzyUK at 3:33 pm (utc) on July 10, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

[Fotiman]

1. You have rules in your "all" stylesheet that specify color, thus it applies to both print and screen.
2. Your "print" stylesheet is linked in before the "all" stylesheet, so rules in the "print" stylesheet that have the same specificity in the "all" stylesheet will be overruled by the styles defined in the "all" stylesheet.

I don't think it has anything to do with your "screen" stylesheets. Try moving your print stylesheet to the last one that gets included and see if that fixes it.

[spirelli]

(That link in my first post has been removed by a moderator)

Thanks Fontiman. However, that didn't fix it. I changed the order of style sheets, but it seems that the styles from the screen css are still applied in print...

[SuzyUK]

yes, spirelli, sorry no links per TOS

OK I also had a look and am afraid it wasn't possible to tell without an awful lot of work, and there's quite a lot of stylesheets to take into consideration.

I think you have cascade or more likely specificity conflicts too, but it's hard to pick a bit of text to compare all its ascendant CSS, which is what I think you have to do

it's easy in the screen medium to see what CSS is affecting a particular element when using something like the web-dev toolbar or firebug

so once you pinpoint some affected text (one paragraph or a heading will do, but you'll know which bit you expect to see in what colors), find out which stylesheet is affecting it (hopefully it's one of the media="all" ones), then check the selectors used, i.e. their exact specificity.. then make sure the print sheet is targetting it with at least the same specificity, - note if it is the same specificity you will need to put your print sheet at the end as fotiman suggested

if you can narrow an element and can capture its CSS then post that css, which sheets it appears in, the css you are using to try and override it, and which order the sheets are in , then we might be able to help more if you're not sure about specifics/specificity

[spirelli]

Many thanks for your friendly and extensive reply. I'll have another look when I get round to it and would post then. All the best.

[spirelli]

Thanks a million everyone. There was a stray style sheet being called after the print style sheet, which overwrote everything. So you were write, Fontiman: The style sheet further down won.
Best wishes.