Closing a Print Ready Page: The CSS Version

[createErrorMsg]

Hello, all.

I posted earlier today on the Javascript section but the discussion quickly degraded (haha) into CSS, so I thought I'd bring my problems over here and see what happens.

Here's the Javascript Post: [webmasterworld.com...]

ANyway, the problem is this: I have a form which, upon submission, uses javascript to dynamically create a customized document for the user. Basic stuff. I added a link for the user to print this generated page, and wanted to get rid of all the un-necessary stuff for the printed version, such as nav and title bars. I used a javascript function to open a new window, write in the content and open a print dialog. i then tried to have the function close the print window when it was done in order to save the user the trouble.

Problem was, while it worked on my hard drive, the thing wouldn't print online. The window would open and close again before the print dialog had a chance to do its thing.

BernardMarx suggested using CSS's @media rule to print the essential areas of the page, instead of using javascript to write a new "printable" page.

I sort of understand @media, but will need to try and use it to get rid of certain parts of the page in order to print.

So here's the question: display:none or visibility:none for those elements?

Also: what are the rules for inheritance with @media? In otherwords, where do I need to put the @media in the stylsheet in order to lessen my work load and specify, in the @media styles, only the necessary rules for getting rid of the unwanted content?

Thanks in advance for any help you can provide.

[createErrorMsg]

Also, Bernard Marx said, "when you get to that other place...Say 'hello' from over here."

So hello from javascript land.

[edited by: createErrorMsg at 10:24 pm (utc) on June 8, 2004]

[Reflection]

You would want to use display:none; as visiblity only effects the visibility, meaning the space the element takes up will still be there even though it is invisible.

As for @media, what I usually do is have a seperate print style sheet. Inside the style sheet I set my main div's that I dont want printed(navigation for instance) to display:none; and then adjust my font-sizes in my content div to pt's.

Check the css library, there are a few topics covering print style sheets.

[createErrorMsg]

Thank you, Reflection. I found a thread in the CSS library that was very helpful.

One question it didn't answer, however: if using a different style sheet for printing (as opposed to @media in the main one) how do I specify it for printing? My guess would be to add the attribute media="print" in the <style> tag but is it really that simple?

[drbrain]

In a style element, do this:

<style type="text/css">
@media print {
...
}
</style>

In a link element, do this:

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

[createErrorMsg]

Got it.
Thanks, brain.