css & printing pages

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

Threaded View
I'm in the process of converting a large site (school district) from
table based layout to css.  Prior to implementing the css pages I
didn't know that a lot of the pages are being printed within the
district for demonstration and/or editing/proof reading purposes.

On the pages that are linked to an external stylesheet I've changed
that code to read:

<link rel="stylesheet" href="curriculum_style.css" type="text/css"
<link rel="stylesheet" href="curriculum_style.css" type="textcss"

Prior to adding "screen/print" the pages printed in a long narrow box
down the center of the page, now they print pretty much the same as
the page is seen online.

What I haven't been able to figure out is what code I need to add to
the pages that aren't linked to an external stylesheet, but have
inline code.  My plan is to eventually have all pages linked to
external stylesheets, but for now I need to address my problem of the
proper syntax for inline code.

One of the pages with the external stylesheet is at:

The page with inline code is at:

Both pages validate as HTML 4.01 Transitional and CSS, but feel free
to critique my code if you'd like.  Constructive criticism is always
welcome and appreciated!

Thank you,


Re: css & printing pages

Leslie wrote:

Quoted text here. Click to load it

First of all, I hope that that second one is "text/css" and not "textcss"
and you just made a mistake copying it over from the real site!

Quoted text here. Click to load it

Oh no, the mistake is on the real site too.

Quoted text here. Click to load it

You can't really. Inline style applies to *all* media -- it can't be fine
tuned for screen, print, handheld, tv, projection, etc, etc...

You would be better off concentrating your efforts on:

Quoted text here. Click to load it

And better yet, get rid of that "s" from the end -- link all the pages to
one style sheet. That way, a change of:

body {
    background: white;


body {
    background: aqua;

will effect the whole site instead of just one page! (Although an aqua
background is probably a mistake!)

Getting back to:

Quoted text here. Click to load it

One of the best things about CSS (and there are many great things about
CSS!) is that you can use *different* styles for different media. By using
something like this:

<link rel="stylesheet" href="master_style.css" type="text/css"
<link rel="stylesheet" href="print_style.css" type="text/css"

You can make the page look different printed and on screen. For example,
on print, you might want to hide the site navigation areas using the CSS
"display:none;" property. Why? Because you can't click links on a piece of

Quoted text here. Click to load it

Well, I hope you saw my criticism as constructive -- it was certainly
meant that way.


Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Re: css & printing pages

On Sat, 22 Nov 2003 19:15:03 +0000, Toby A Inkster

Quoted text here. Click to load it

That was a definite OOPS!  Wonder why if validated and print previewed

Anyway, I've fixed that and now find that it print previews as a
narrow box down the middle of the page.  Could that be because I'm
using the same stylesheet for screen & print?  I know I should be
using separate sheets for each type of media, but this was meant to be
a quick fix for a problem I didn't know existed until this week.  
Quoted text here. Click to load it


Right now I'm working on each section of the site having its own
stylesheet.  I'm nowhere near proficient with css yet to be
comfortable with only one stylesheet for the entire site because each
dept./school has different criteria for the way they want their pages
laid out.  All are very similar and eventually I'll have them all
conform to the same layout, but right now I'm just trying to keep my
head above water with the request for updates as they come in.  It's
either feast or famine - a week or two with no requests (that's when I
work on converting to css) or a few weeks with enough requests to keep
an army of people busy.  :-)
Quoted text here. Click to load it

That's definitely my goal, but as mentioned above this different media
concerns with css is something I just learned about this week.  Right
now using the same stylesheet for screen & print was a quick fix, but
will change as I learn more about css and its possibilities.

As green as I still am at css I can't imagine ever going back to using
tables for layout.
Quoted text here. Click to load it

I certainly do, and I'm most appreciative!  Thank you!


Re: css & printing pages

Quoted text here. Click to load it

It validated because the HTML DTD just says that the content of a <link>'s
type attribute must be CDATA, which in SGML terms means pretty much
anything.  A validator can only check that the structure is correct, not
the content.

The correct print preview was probably because the browser wasn't applying
any external stylesheet during printing.

Re: css & printing pages

Quoted text here. Click to load it

Actually, I use the same stylesheet for media and print, but I use @media
print.  Like this:

/* all except print */
#footer {border:1px solid #000;}
/* end all except print */
/* for printing */
@media print {
/* end printing */

Adrienne Boswell
Please respond to the group so others can share

Re: css & printing pages


Quoted text here. Click to load it

Putting the school details (phone/fax/address/NAME) in a graphic and
displaying them as a background makes them invisible to non-visual
Quoted text here. Click to load it


Re: css & printing pages


Quoted text here. Click to load it

Hadn't thought of that.  Thank you!  With the pages that are table
based the graphic has minimal contact info in the alt tag, but I can
see that the contact info should be made accessible to all browsers.

Thanks for the heads up!


Site Timeline