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;
}