Fixing truncated printing with Firefox

Proving the Obviously Untrue

Fixing truncated printing with Firefox Wed, Apr 16. 2008

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.
      <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
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 in php Comments: (0) Trackbacks: (0)
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!

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments
Display comments as (Linear | Threaded)

No comments


Add Comment

Standard emoticons like :-) and ;-) are converted to images.

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

You can use [geshi lang=lang_name [,ln={y|n}]][/lang] tags to embed source code snippets
BBCode format allowed