CSS Print Command

If you ever have a page that looks great on the screen but when you print it the info is cut off. Problematic right? Well, there’s a fix, it may not work for all pages, but it will help you hide the unwanted portions of a page when the user prints.

Code:
********************************************************
PLEASE MAKE SURE YOU REMOVE ALL $'s from this code
They were added so code would show up in the page
********************************************************

<$style type="text/css" media="print">
.nodisplay{display: none;}
<$/style>


The media=”print” is the key here. It dictates that on the print command to apply this style or styles.

Add a class=”nodisplay” to the portion you want to hide.

Cut and paste this to see how it works. NOTE: use the print preview option so you don’t burn ink.


<$table class="nodisplay" id="Table" cellspacing="0" cellpadding="0" width="100%" border="0" runat="server">
<$tbody><$tr>
<$td valign="top" width="30%">
***************************************
THIS INFORMATION SHOULD NOT PRINT!!!!!!
***************************************
<$/td>
<$/tr><$/tbody><$/table>
<$br>
<$br>
<$br>
<$table class="nodisplay" id="Table" cellspacing="0" cellpadding="0" width="100%" border="1" runat="server">
<$tbody><$tr>
<$td valign="top" width="30%">
_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
THIS INFORMATION SHOULD PRINT!!!!!!
_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
<$/td>
<$/tr><$/tbody><$/table>

Neeed more help? Check out Downtown Digital for more cool tips and tricks.