Print stylesheet not working at all

Hello,

I have tried adding a print stylesheet to a web page I am working on.
When I try to print the page it has no styles applied to it at all. This
happens in every browser I have tried, on Windows and Linux, and whether
the page is loaded locally or on the web. So I must be doing something
wrong. In the html the stylesheet link looks like this:

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

You can view the actual page at:
http://www.livingwater.usa.to/test/index.html

Can anyone see what I am doing wrong?

At first glance, you are setting the media type = to print, which means that
you have to use the paged media formatting info in your stylesheet. A good
reference can be found at http://www.w3.org/TR/REC-CSS2/media.html#media-types
and then follow the link to paged_media (
http://www.w3.org/TR/REC-CSS2/page.html ).

You could always create a print friendly version of the page, using css, and
then have a link to it. (good ref: http://www.ericmeyeroncss.com/projects/06/)

In looking at your print style sheet, I don't see any formating. It looks
like it's printing the way your style sheet is written.


"wg" <stop (AT) spamming (DOT) me> wrote

Hello,

I have tried adding a print stylesheet to a web page I am working on.
When I try to print the page it has no styles applied to it at all. This
happens in every browser I have tried, on Windows and Linux, and whether
the page is loaded locally or on the web. So I must be doing something
wrong. In the html the stylesheet link looks like this:

link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" /

You can view the actual page at:
http://www.livingwater.usa.to/test/index.html

Can anyone see what I am doing wrong?

Here is a DW MX 2004 extension that allows you to view and edit pages
for any media type:

http://www.macromedia.com/cfusion/exchange/index.cfm#view=sn201&extid=1008220

Hope this helps,
Randy

drb1215 wrote:

At first glance, you are setting the media type = to print, which means that
you have to use the paged media formatting info in your stylesheet. A good
reference can be found at http://www.w3.org/TR/REC-CSS2/media.html#media-types
and then follow the link to paged_media (
http://www.w3.org/TR/REC-CSS2/page.html ).

You could always create a print friendly version of the page, using css, and
then have a link to it. (good ref: http://www.ericmeyeroncss.com/projects/06/)

I wasn't aware that you had to use special formatting info when using

the print media type. I was following the information in this article:

http://www.meyerweb.com/eric/articles/webrev/200001.html

Are you saying that you must surround styles with @page{} or @media
print{}? I thought this was necessary only for styles which are embeded
in the html.

Herb wrote:

In looking at your print style sheet, I don't see any formating. It looks
like it's printing the way your style sheet is written.

Well after reading your message I checked the stylesheet again and
noticed some errors. I terminated 3 rules with a colon instead of a
semicolon. Fixing it didn't help though. :-(

There isn't a lot of formatting in the stylesheet, but there is some. I
mainly just wanted to get rid of the menu, sidebar, and the language
links. But even the simple test styling doesn't show up. This is what's
in the stylesheet:

body {
color: #000;
background: #fff;
font-size: 12pt;
}

h2 {
font-size: 14pt;
font-weight: bold;
}

#menu {
display: none;
}

#topbar {
display: none;
}

#sidebar {
display: none;
}

"wg" <stop (AT) spamming (DOT) me> wrote in message
news:cefo37$acs$1 (AT) forums (DOT) macromedia.com...

Hello,

I have tried adding a print stylesheet to a web page I am working on.
When I try to print the page it has no styles applied to it at all. This
happens in every browser I have tried, on Windows and Linux, and whether
the page is loaded locally or on the web. So I must be doing something
wrong. In the html the stylesheet link looks like this:

link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" /

You can view the actual page at:
http://www.livingwater.usa.to/test/index.html

Can anyone see what I am doing wrong?

I think the problem is that you have specified media="screen" on your
main style sheet, so you don't get those styles when printing.

Change that to media="all" so that you get all of those styles plus the
overriding styles in your media="print" style sheet.

HTH,
Randy

There isn't a lot of formatting in the stylesheet, but there is some. I
mainly just wanted to get rid of the menu, sidebar, and the language
links. But even the simple test styling doesn't show up.

wg wrote:

Hello,

I have tried adding a print stylesheet to a web page I am working on.
When I try to print the page it has no styles applied to it at all.
This happens in every browser I have tried, on Windows and Linux, and
whether the page is loaded locally or on the web. So I must be doing
something wrong. In the html the stylesheet link looks like this:

link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" /

You can view the actual page at:
http://www.livingwater.usa.to/test/index.html

Can anyone see what I am doing wrong?

Your main style sheet has a media type "screen". Normally, this is the
correct way to do it as it allows you to make a print style sheet that
is unaffected by cascade issues from your main style sheet. It also
usually results in a much better printed page if your print style sheet
is very minimally styled. However, since you want your main styles to be
picked up, change screen media in your main style sheet to media="all".
Now you will have to address cascade issues from one sheet to the other,
but all modern browsers will use both for printing.

--
Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - CSS FastPacks
---------------------------------------------------------
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
RSS/XML Feeds: http://www.projectseven.com/xml/

I don't want the screen styles to be in effect when it prints. So that
is not an issue. The print stylesheet didn't have many styles in it
because I wan't finished with it. I ran into this problem immediately
and didn't bother trying to style it further because I couldn't even see
how the print styles looked.

I did get it to work though by changing the way the screen stylesheet is
loaded. I changed the links to the stylesheets from this:

<link rel="stylesheet" type="text/css" media="screen"
href="clwm_screen.css" title="Screen" />
<link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" />

To this:

<style type="text/css" media="screen">@import "clwm_screen.css";</style>
<link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" />

I made this change after looking at the html for alistapart.com's front
page. I don't understand why the print stylesheet isn't applied in the
first example. If anyone knows why I would love to hear the explanation.
Everything I have read so far indicates that the first method should
work. Is this a browser bug?

Randy Edmunds wrote:

I think the problem is that you have specified media="screen" on your
main style sheet, so you don't get those styles when printing.

Change that to media="all" so that you get all of those styles plus the
overriding styles in your media="print" style sheet.

HTH,
Randy


There isn't a lot of formatting in the stylesheet, but there is some.
I mainly just wanted to get rid of the menu, sidebar, and the language
links. But even the simple test styling doesn't show up.

.oO(wg)

I did get it to work though by changing the way the screen stylesheet is
loaded. I changed the links to the stylesheets from this:

link rel="stylesheet" type="text/css" media="screen"
href="clwm_screen.css" title="Screen" /
link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" /

To this:

style type="text/css" media="screen">@import "clwm_screen.css";</style
link rel="stylesheet" type="text/css" media="print"
href="clwm_print.css" title="Printer" /

I made this change after looking at the html for alistapart.com's front
page. I don't understand why the print stylesheet isn't applied in the
first example. If anyone knows why I would love to hear the explanation.
Everything I have read so far indicates that the first method should
work. Is this a browser bug?

No bug, it's because of the title-attibutes.

Read about the three different ways of referring to an external
stylesheet (persistent, preferred, alternate):

Alternative Style: Working With Alternate Style Sheets
http://www.alistapart.com/articles/alternate/

In your case both stylesheets have a title-attribute, so the browser
takes the first as the preferred one and the other as an alternative.
That's why the print-stylesheet doesn't work: If in print-mode the
browser still prefers the first, but this only applies to screen-media.

If you switch to the other stylesheet (Mozilla and Opera allow you to
switch between different alternate stylesheets if available) the result
is vice versa: The print-stylesheet works, but in screen-mode no styles
are used, because the now preferred stylesheet only applies to print-
media.

Simply remove the title-attributes to make your both stylesheets
persistent and it should work as expected.

HTH
Micha