CSS for printing

One of our clients wants their website to print out on paper the way it looks on screen. I need to develop custom css for printing.

So after my main css is called, I add the call to the conditional css file like this:
link rel="stylesheet" href="_print_style.css" type="text/css" media="print"

then in the _print_style.css file, I hid certain elements that shouldn’t print, such as the navigational menu boxes with
.sbox {display:none;}

A big issue I found was that floating div’s do not print across pages; To fix this issue, I added entries for each floating div to my _print_style.css file like this:
#bbox {width:780px;float:none;}

A few other tweaks here and there, now all the information shows up nicely on the printed page without needing a special “printable version” of the webpage.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *