Forum Moderators: not2easy
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<head>
<style type="text/css" media="screen">
.printonly { visibility:hidden; }
</style>
<style type="text/css" media="print">
.noprint { visibility:hidden; }
</style>
</head>
<body>
<div class="noprint">This text for screen display only</div>
<div class="printonly">This text for printing only</div>
</body>
Any suggestions?
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;
}
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 {
visibility:hidden;
position:relative;
top:-100px;}
</style>
to move the print table up, but it won't move.
And thanks for that whole CSS page, D_Blackwell; I'll keep that for future reference.
