Apr 16

Fixing truncated printing with Firefox

php 3 Comments »
php A while ago, I discovered that my current main development project OPUS had an odd problem when printing out of a gecko based browser.

It would print the first page, whether in portrait or landscape, and if there was more content, it would be abruptly truncated and the second page would contain merely the footer off the page. I've been meaning to try and solve the problem with a print stylesheet for a while and finally did so today.
First of all, I added a link to an additional style sheet, after all the other sheets had been loaded.
  1.  
  2.   <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
  3.  
Now we can make our overrides in the print stylesheet only. It seems that there are two main problems that cause this issue
  • handling of nested divs in certain situations (see here)
  • large tables that span pages (see here)
I inlined some blocks, turned off display for others, and set heights of 100% on both table and td, and now everything is working properly. It's a shame such tweaks are needed for gecko; I'm used to tweaking applications for IE, but not for Firefox.
  1.  
  2. /* Style Sheet used for overriding various aspects of display for printing */
  3.  
  4. #main_content {
  5.   display: inline;
  6.   overflow: visible;
  7. }
  8.  
  9. #page_wrapper {
  10.   display: inline;
  11.   overflow: visible;
  12. }
  13.  
  14. #content_block {
  15.   width:auto;
  16.   clear:left;
  17.   padding-left: 10px;
  18.   padding-right: 10px;
  19.   display: inline;
  20.   overflow: visible;
  21. }
  22.  
  23. #table_list {
  24.   margin-right:0.5em;
  25.   margin-bottom: 0.5em;
  26.   display: inline;
  27.   overflow: visible;
  28. }
  29.  
  30. /* table and td need height set to 100% to print correctly in large examples on firefox */
  31.  
  32. #table_list table {
  33.   border:#ccc 1px solid;
  34.   color: #555555;
  35.   font-size: 0.9em;
  36.   width:100%;
  37.   height: 100%;
  38. }
  39.  
  40. #table_list td {
  41.   font-family: Verdana, Arial, sans-serif;
  42.   padding: 2px;
  43.   border-right:#ccc 1px solid;
  44.   height: 100%;
  45. }
  46.  
  47. #table_list thead {
  48.   display: table-header-group;
  49. }
  50.  
  51. /* Navigation is somewhat pointless */
  52.  
  53. #menu {
  54.   display: none;
  55. }
  56.  
  57. #submenu {
  58.   display: none;
  59. }
  60.  
  61. #mini_menu {
  62.   display: none;
  63. }
  64.  
  65. #header {
  66.   background-color: transparent;
  67.   background-repeat: no-repeat;
  68.   background-position: top right;
  69. }
  70.  
  71. #page_title {
  72.   clear: left;
  73.   text-align: left;
  74.   padding-left: 10px;
  75.   line-height: 2em;
  76.   background-color: transparent;
  77.   background-repeat: no-repeat;
  78.   background-position: top left;
  79.   min-height: 2em;
  80.   height: 2em;
  81. }
  82.  
  83. #footer {
  84.   display: none;
  85. }
  86.  

Posted by Colin Turner

Defined tags for this entry:
Related entries by tags:
Garbage collecting sessions in PHP
My first Munin plugin
Drupal Login Problems
SimpleXML should be called BloodyAckwardXML
Bookmark Fixing truncated printing with Firefox at del.icio.us Digg Fixing truncated printing with Firefox Mixx Fixing truncated printing with Firefox Bloglines Fixing truncated printing with Firefox Technorati Fixing truncated printing with Firefox Fark this: Fixing truncated printing with Firefox Bookmark Fixing truncated printing with Firefox at YahooMyWeb Bookmark Fixing truncated printing with Firefox at Furl.net Bookmark Fixing truncated printing with Firefox at reddit.com Bookmark Fixing truncated printing with Firefox at blinklist.com Bookmark Fixing truncated printing with Firefox at Spurl.net Bookmark Fixing truncated printing with Firefox at NewsVine Bookmark Fixing truncated printing with Firefox at Simpy.com Bookmark Fixing truncated printing with Firefox at blogmarks Bookmark Fixing truncated printing with Firefox with wists Bookmark Fixing truncated printing with Firefox at Ma.gnolia.com wong it! Bookmark using any bookmark manager! Stumble It!

0 Trackbacks

Trackback specific URI for this entry
  1. No Trackbacks

3 Comments

Display comments as(Linear | Threaded)
  1. Anonymous says:
    10/20/09 12:06:25

    Thank you very much, I've never faced this problem before and your solution is the one that worked for me.

    I've read things about Firefox like reseting configuration (about:config, print.etc) but that was useless.

  2. Colin Turner says:
    10/21/09 08:58:09

    Gosh, it's interesting (depressing) to hear Firefox still has this problem, but glad it helped you :-).

  3. Justin says:
    09/23/10 17:33:55

    I recently had this problem where Firefox was only printing the 1st page. None of these solutions above worked for me, but what I did find was that because my main content of my page was floated, Firefox was having an issue with printing. The solution was to remove the float. Hope this helps as well...

Add Comment



To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

BBCode format allowed
Standard emoticons like :-) and ;-) are converted to images.
You can use [geshi lang=lang_name [,ln={y|n}]][/geshi] tags to embed source code snippets.