text to show only when printed and not on screen - CSS problem

[pendle666]

Hello,

I have a layout.css for the on-screen style and a print.css for the style on paper.

I have successfully removed the items I don't want to print out using {display: none;} in the print.css.

On the printed page, I would like some other text to print, this doesn't appear on screen.

I've put the {display: none;} in the layout.css and the styles required in print.css however it will not print out.

Can I have text which is only seen on paper or have I done something wrong?

Here is the code:

LAYOUT.CSS
#printfooter {display: none;}
.printtext {display: none;}

PRINT.CSS
#printfooter {margin: 1.3em 0.9em 1.5em 1em;}
.printtext {font : 10pt verdana, arial, helvetica, sans-serif; text-align: right; color : black; }


AND ON THE HTML DOC:
<div id=&quot;printfooter&quot; class=&quot;printtext&quot;>Lorem ipsum dolor sit amet<br />consetetur sadipscing elitr<br /> sed diam nonumy eirmod tempor invidunt <br />ut labore et dolore magna aliquyam <br /></div>

 

[Ecniv]

Silly question but I take it the css files are external... did you when you linked them specify which media type they should be?

<link rel.... media=print>


Might fix the problem.


Vince

 

[pendle666]

Yes, the files are external. This is how they are linked:

<style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;layout.css&quot;;</style>

<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; href=&quot;print.css&quot; />