homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

media-specific CSS

5+ Year Member

Msg#: 3725108 posted 10:04 pm on Aug 17, 2008 (gmt 0)

I need CSS (in the page header) that changes the formatting on the print version of a page. Specifically, I want certain text that's visible onscreen not to be printed, and vice versa. I've tried the following, but it doesn't work:

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<style type="text/css" media="screen">
.printonly { visibility:hidden; }

<style type="text/css" media="print">
.noprint { visibility:hidden; }

<div class="noprint">This text for screen display only</div>
<div class="printonly">This text for printing only</div>

Any suggestions?



5+ Year Member

Msg#: 3725108 posted 10:09 pm on Aug 17, 2008 (gmt 0)

Running IE 6 and FF 2 - I put that code in an html file (with the <html> and </html> tag added in) and it worked just fine.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3725108 posted 11:15 pm on Aug 17, 2008 (gmt 0)

Looks okay here too.

Here is a sample print stylesheet from a 'Shipping Policy' page.

Changed my em font-size: to px, made a number of width: adjustments, shut off the navigation and background-images. A few tweaks result in a page that prints as if it was designed for print in the first place.

html, body {
width: auto; margin: 0; padding: 0; font-size: 12pt; font-family: Arial, Verdana, Helvetica, sans-serif; background-color: #fff; background-image: none; color: #000;
h1#logo {
margin: auto; width: 80%; border-width: 4pt; background-color: #fff; background-image: none;
a {
display: none;
.header-a {
text-decoration: none;
img {
display: none;
.click-box {
width: 100%; border-width: 0; margin: 0; padding: 0; background-color: #fff; background-image: none; font-size: inherit;
.dont-print {
display: none;
#menu-div {
display: none;

#menu-div ul {
display: none;


5+ Year Member

Msg#: 3725108 posted 12:42 am on Aug 18, 2008 (gmt 0)

Okay -- found a typo that was causing that.

I'm still having trouble with vertical spacing though. The text is actually in <table> tags, but when I use:

<table class="noprint">

it leaves a blank space on the printed page where the table used to be. I tried using:

<style type="text/css" media="screen">
.printonly {

to move the print table up, but it won't move.


10+ Year Member

Msg#: 3725108 posted 1:57 am on Aug 18, 2008 (gmt 0)

Try display: none; instead of visbility: hidden; because with visibility: hidden; the element still takes its space in the layout.


5+ Year Member

Msg#: 3725108 posted 12:32 pm on Aug 18, 2008 (gmt 0)

Thanks guys -- that's perfect.

And thanks for that whole CSS page, D_Blackwell; I'll keep that for future reference.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved