Well. What better way to spend time on a bank holiday weekend after the recent "Royal Wedding".
An Internet Explorer 7 (IE7) feature was preventing the page content beyond the first page from printing properly for
Albany UK property projects. In the browser's print preview option, the first page was displaying but with content truncated at the foot of the page. The second page onwards showed only the css background color/image but no page content.
Interestingly, Firefox, Safari and Internet Explorer 8 printed out the pages correctly, although some of the property listings were getting cut in half at the end of the page. Not pretty.
The fix was to invoke the less well known CSS feature "display:inline-block;" for the outer box (div) containing the property listing divs, the property listing divs themselves, and (because of the WordPress structure) the .article class (each property listing is technically a post.)
Sounds straightforward? Well, no. The other part of the fix was to use a CSS hack, or IE7 selector, so that the styles would only be applied in IE7 browsers.
e.g.
#main {position:relative; *position:static; *display:inline-block;}
.article {*display:inline-block;}
Applying the changes to affect all browsers broke the print layout in IE8 and Firefox.
There are some general guides for avoiding CSS print issues:
Beware floats
Stay mindful of absolute or relative positioning
Watch the use of height and width defined in px
Keep an eye on overflow
Ideally the print layout should display all content inline and with auto properties (width, height, position, overflow, etc.) and the browser rendering engine should never be confused by boxes within boxes (nesting of block level elements) but when does that happen, eh?
Some google results that helped...
The Blog of Ben Nadel
ServerFault
Posts
