Print CSS Not Loading

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
alt.html pointed me here, so...

I have two CSS files for print and screen. In screen.css:





In the HTML:

<link rel="stylesheet" type="text/css" media="print"
href="print.css" /

<link rel="stylesheet" type="text/css" media="screen"
href="screen.css" />
<font class="screen">Text A</font><br><font class="print">Text B</


In print.css, the parameters are swapped. In other words, Text B will
show on the printed page, but not on screen, and vice-versa for Text

But as it stands now, it's not quite working. On "screen," it looks
OK; hidden text is hidden, shown text is shown. When printed in
Firefox 2, though, the output looks no different from on "screen." I'm
stumped why this is, and so is everyone else I've shown this to. Any

Re: Print CSS Not Loading wrote in news:1190306485.322880.281090

Quoted text here. Click to load it

why are you using the <font> tag? especially since you are using CSS!!!
* there is no need for that tag at all in 2007 *.  perhaps <span> or
<div> would be better.

also, use "display: none" instead of "visibility: hidden"; your document
will flow better.  

in answer to your question, you need to add "display: none" to your
"screen" class in "print.css"

also, generally i put the "print.css" after "screen.css" and remove the
"media='screen'", that way the print inherits all the styles defined in
"screen.css" and you can just override particular/selected classes in
"print.css"... but of course that might not fit your particular need.
this might be the solution to your problem, too.  cascading effect!

Re: Print CSS Not Loading

On Thu, 20 Sep 2007, wrote:

Quoted text here. Click to load it

... and I point you to

Re: Print CSS Not Loading wrote:
Quoted text here. Click to load it
  You've left out too much context to give an answer.
  Please provide an URL to a test case that demonstrates the problem.

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Print CSS Not Loading

On 20 Sep, 17:41, wrote:
Quoted text here. Click to load it

I suggest having two CSS stylesheets, one for "print only" and one for
"everything else".  It's generally easier to organise a project by
having an overall stylesheet for all media and just modify this where
needed for printing. As screen is our default viewing mode for most
things, make that the generic one and use print as the specific case.
Remember that this isn't a binary choice - there are more than two
media types. What happens for the others?

You can also place these two stylesheets(sic) within one file, by
using the @media print { } directive to embed the print-only
stylesheet inside the general stylesheet. It's one less file to worry
about, or to link into each web page.

In screen.css:
Quoted text here. Click to load it

Are you using the mechanism to select a stylesheet according to the
media type, and then repeating yourself by using a class inside the
HTML to control behaviour?  A class of "screen" or "print" is simply
pointless - the media type can't control the class that's used in the
CSS selector. If you're actually using wrongly-named classes here to
mean "screen-only" or "print-only", then call them that instead and
have it clearer.

I'd also suggest that names of "print-only" and "screen-only" might
noot be what you mean either. What happens if it's a media type that
isn't either of these? Probably (sic) you want the "screen" content
displayed too, because the class was really supposed to mean "no-
print" instead.

If you wish, use the CSS fragment below and play around with HTML
classes of "no-print" and "print-only"

Quoted text here. Click to load it

Don't set font sizes in pixels. Set screen font sizes in %, em, or
don't set them at all and just let the user's default take care of it.

Set font sizes in pt in your print stylesheet (or don't set them at
all and just let the user's default take care of it).

Quoted text here. Click to load it

You need to understand the difference between
     display: none;
    visibility: hidden;

Often you want display (make it go away) rather than visibility (leave
a blank hole)

Quoted text here. Click to load it

Post a URL, not a fragment. It's much more useful to readers.

Quoted text here. Click to load it

Don't use <font>   In this case <span> would be more approriate.

Quoted text here. Click to load it

So am I, so I'm not even going to try.  If you'd posted a URL then I
could see, but you posted a fragment of HTML that referenced two CSS
documents I don't have. I can't try to debug something when I don't
know if I've got the actual code.

Here's a useful snipppet. Note that it doesn't work on IE, as that
doesn't support display: inherit;
The fixed version is simple, but too verbose to post to Usenet. Ask if
you want it

/*  Print control  */
    display: none;
    visibility: hidden;

@media print {
  .print-only {
    display: inherit;
    visibility: display;
  .no-print {
     display: none;
    visibility: hidden;

Re: Print CSS Not Loading wrote in

Quoted text here. Click to load it

One reason why it's better to give a URL than to post code.  No one
here can say if that's an error in copy/paste or in your original page,
but this link element isn't closed.  And unless you're doing XHTML,
just use ">" and not "/>".  A validator would help you find a problem
like that immediately.

Re: Print CSS Not Loading

Scripsit Thomas Dowling:

Quoted text here. Click to load it


Technically, it is.

Quoted text here. Click to load it

No, it would not. Try it. The link element's markup is valid, HTML 4.01.

It's time for a rerun of the Saga of the Slashed Validators:
(even though it mainly discusses variants like <a href=../foo.html>, which
can be even more deceptive).

Jukka K. Korpela ("Yucca")

Site Timeline