As I was going through and reading the blogs I follow, I noticed that one of them had a pretty nifty (I know, dated saying), button on their site; it was a "Print this Page" button. Basically, what this does is when you press the button, only the blog post and the comments will print out. The rest of the site, including the sidebars, header, and the footer are not printed. This allows the reader to print out an article that interests them, without having the entire blog printed.
So, since several of my articles are recipes and how-to's, I decided that it would be nice to enable this feature on my site. With this in mind, I went in search of some code and then began tweaking it on my test blog. After I got the actual button positioned and the code in place, I started to run tests in Firefox to see if it actually worked. I hit print preview and I noticed that whatever I did, only one page of my article would appear. No page two, no comments.
After several hours of trying to figure this thing out, I eventually ran across a posting in a forum which stated that this is a known issue in Firefox, but in IE or Chrome, it prints the entire post w/ comments. I switched over to IE and sure enough, it worked just fine. So, I now needed to search for a fix and after about thirty minutes of searching, I found one. Although this feature is not yet available on this site, I have incorporated it on the new template I am working on and I am hopeful to be able to transfer my blog to that template within the next few days.
If you're interested, here is the code I used
WITH the fix (overflow:visible;) and the IE fix in bold and enlarged...
<style type='text/css'>
@media print{
body{margin: 10px; background-color:#FFFFFF; background-image:none;
font:color:#000000 }
p{font:14pt Arial;}
#main-wrapper{ overflow:visible;width:100%;}
.post
#header{ display:none;}
#left-sidebar-wrapper{ display:none;}
#right-sidebar-wrapper{ display:none;}
<!--[if !IE]>
#footer-wrapper{ display:none;}
.fineprint{ display:none;}
.comment-footer{ display:none;}
.feed-links{ display:none;}
#backlinks-container{ display:none;}
#blog-pager-newer-link{ display:none;}
#blog-pager-older-link{ display:none;}
#blog-pager{ display:none;}
<![endif]-->
This should be placed directly before the </head> tag.
I still need to add additional formatting to this code, but it works.
Oh, here's the code for the button
<form><input onclick='window.print();return false;'
type='button' value=' Print this Article '/></form>
If you are currently having this same problem, here is the link to the site where I found the fix... forums.cnet.com
Can't you tell that this post was thrown together at the last minute??
