Fixing truncated printing with Firefox

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.

  

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.

/* Style Sheet used for overriding various aspects of display for printing */

#main_content {
  display: inline;
  overflow: visible;
}

#page_wrapper {
  display: inline;
  overflow: visible;
}

#content_block {
  width:auto;
  clear:left;
  padding-left: 10px;
  padding-right: 10px;
  display: inline;
  overflow: visible;
}

#table_list {
  margin-right:0.5em;
  margin-bottom: 0.5em;
  display: inline;
  overflow: visible;
}

/* table and td need height set to 100% to print correctly in large examples on firefox */

#table_list table {
  border:#ccc 1px solid;
  color: #555555;
  font-size: 0.9em;
  width:100%;
  height: 100%;
}

#table_list td {
  font-family: Verdana, Arial, sans-serif;
  padding: 2px;
  border-right:#ccc 1px solid;
  height: 100%;
}

#table_list thead {
  display: table-header-group;
}

/* Navigation is somewhat pointless */

#menu {
  display: none;
}

#submenu {
  display: none;
}

#mini_menu {
  display: none;
}

#header {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top right;
}

#page_title {
  clear: left;
  text-align: left;
  padding-left: 10px;
  line-height: 2em;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top left;
  min-height: 2em;
  height: 2em;
}

#footer {
  display: none;
}

Follow me!

4 thoughts on “Fixing truncated printing with Firefox

  1. Anonymous says:

    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. Justin says:

    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...

  3. Nathan says:

    Followed comment from Justin. Similar situation when using Firefox 3.6. I had placed "float:left" on several of my table tags. When I viewed the page in Landscape the table wrapped correctly from the first to second page but when I viewed it in Portrait the table would display on the first page but nothing appeared on the second page and sometimes the table contents wouldn't display at all. Once I removed the "float:left" the full contents of each table displayed in both Landscape and Portrait.

  4. Pingback: Firefox truncating long tables… | Tohuwawohu's Blog

Leave a Reply to Justin Cancel reply

Your email address will not be published. Required fields are marked *