Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

media-specific CSS

10:04 pm on Aug 17, 2008 (gmt 0)

5+ Year Member

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?

10:09 pm on Aug 17, 2008 (gmt 0)

5+ Year Member

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.
11:15 pm on Aug 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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;

12:42 am on Aug 18, 2008 (gmt 0)

5+ Year Member

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.

1:57 am on Aug 18, 2008 (gmt 0)

10+ Year Member

Try display: none; instead of visbility: hidden; because with visibility: hidden; the element still takes its space in the layout.
12:32 pm on Aug 18, 2008 (gmt 0)

5+ Year Member

Thanks guys -- that's perfect.

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


Featured Threads

Hot Threads This Week

Hot Threads This Month