A Life, Truncated.

October 22, 2013 1:37 PM

I'm having a devil of a time getting my long Wordpress pages to print properly.

Summary: I've searched the highways and byways, I've tried a handful of different things, and I still can't seem to get my List of Works to print in full.

In order to have more control over the printing of my site, I've created a print.css stylesheet as noted in the WP Codex. Everything looks peachy, font and size-wise, except my browser (Firefox v24.0/Mac OS 10.6.8) only prints a truncated first page and a blank second page. I believe it's seeing the page as a "scrollable" window, and thus cutting off at the bottom where a normal browser window would have a scrollbar. I've tried many things to disable this function, including the advice found here from StackOverflow and here from A List Apart. But alas.

My print.css code is as follows:

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
#header { display:none }
#content { margin-left:0; 
     float:none;
     width:auto;
     height:auto;
     overflow: visible; 
     color:black; 
     font-size:10pt;
     font-family: Verdana, Arial, Helvetica, sans-serif }
#comments { display:none }
#sidebar { display:none }
#footer { display:none }
}

I admit I know far too little about this sort of thing and usually stumble into the correct answer by accident, but my luck fails me here. What blindingly obvious thing am I missing?

(Per MeFi etiquette, please see my profile for the link.)

posted by mykescipark to Computers & Internet (4 answers total)

It's hard to know what's up without being able to inspect the site in question, but my first thought is that sometimes HTML and BODY elements are given heights for various reasons; try overriding those as you have the height for #content.

Update: sorry, just noticed the note about the link to your site. I'll take a peek.
posted by o2b at 1:44 PM on October 22, 2013

I can't find a page that would print on two pages — can you point me to one?
posted by o2b at 1:47 PM on October 22, 2013

Response by poster: I can't find a page that would print on two pages — can you point me to one?

A direct link is in the About section of my profile. :-)
posted by mykescipark at 1:54 PM on October 22, 2013

Best answer: ...and I was saved by an anonymous source who provided the following info:

With a Mac/Firefox, I was able to reproduce the weirdly truncating issue whenever I hit print preview on the link you provided.

I poked various things here and there with Firebug and came to the conclusion that for some reason the display: inline-block settings for #wrapper and #inwrapper seemed to be the simplest change I could address to get the whole webpage to preview correctly.

To reset that setting for printing, I would add these lines to the print.css file:

#wrapper { display: block; }
#inwrapper { display: block; }

I have never come across this behavior before but I think this bug report about long inline-block elements getting cut off (reported in 2009!) is possibly related.

Thanks, y'all! I'm gonna mark this Resolved.
posted by mykescipark at 2:35 PM on October 22, 2013