Hi,

I am creating printing templates for a new websites, using IBM Websphere . A template pulls in a menu component which sets the header and footer and then the rest of the data is pulled from the fields filled in on content pages e.g. image, title, description. The HTML is in tact and valid. Problem is when I print a page form Firefox, one of the boxes gets truncated and the content is completely missing (at the bottom of the page). Does not happen in IE8, but I have tested it with PDFCreator and the problem happens here too.

Code sample:

<div class="example">
<div class="header>
 Header
</div><!--/header>
<div class="box" id="box1">
 <div class="img">
 </div>
 <div class="title">
 </div>
 <div class="intro">
 </div>
</div><!-- /box -->
<div class="box" id="box2">
 <div class="img">
 </div>
 <div class="title">
 </div>
 <div class="intro">
 </div>
</div><!-- /box -->
<div class="box" id="box3">
 <div class="img">
 </div>
 <div class="title">
 </div>
 <div class="intro">
 </div>
</div><!-- /box -->
<div class="box" id="box4">
 <div class="img">
 </div>
 <div class="title">
 </div>
 <div class="intro">
 </div>
</div><!-- /box -->
<div class="footer">
</div><!-- /footer -->
</div><!-- /example -->

I can post more code if required.

Has anyone experienced this before or know of a possible fix? The boxes are floated left and have a height set, for layout purposes, but removing these styles does not fix the problem.

Look forward to any ideas. Thanks.