css - problems with text to appear only with printed page

by Pendle <pendle_666(at)yahoo.co.uk>

 Date:  Fri, 31 Jan 2003 04:26:39 -0800 (PST)
 To:  hwg-style(at)hwg.org
  todo: View Thread, Original
Hello,

I'm having a go at doing a print.css file so that my
web pages look good on paper.

Using {display: none;} the parts that I don't want
printed, don't print - all well and good.

However, I would like to have some contact details to
appear at the end of the printed page, but I don't
want this viewable on screen as there is a contact
link.

I figured that if I could use {display: none;} to
'remove' sections of the web file on paper, I could so
the same with the screen version.   I assume that this
will work, however I can't get it to work.

On the HTML file, the text for printed/non-printed
sections looks like this:

<div class="bottomrow">
<span class="right">
<a class="foottext" href="./">Name of
company</a><br />
<a class="foottext" href="contact.html">Contact
details</a><br />
<a class="foottext"
href="disclaimer.html">Disclaimer</a></span>

<span class="left">
<img src="graphics/credits.gif" height="70"
width="140" alt="accreditations" /></span>
</div>
<div class="spacer"></div>



<div id="printfooter" class="printtext">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>


Everything in the top section (div.bottomrow) will be
seen on screen and not on the printed page.  And the
idea is that everything in the printfooter div will
not be seen on screen but appears in print.

Here is the CSS:


LAYOUT.CSS (on-screen)

div.bottomrow 	{clear: both;}
div.bottomrow span.left {float: left; padding : 1em
1.25em 1em 1em; text-align: left;}

div.bottomrow span.right {float: right; margin: 1.3em
0.9em 1.5em 1em; text-align: right; }

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


PRINT.CSS (on paper) 
div.bottomrow 	{display: none;}
div.bottomrow span.left {display: none;}
div.bottomrow span.right {display: none;}

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


My idea works in a way, in that the
printfooter/printtext elements are not on screen - but
they won't print on paper either!

Can anyone please point me in the right direction?

Pendle



__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA