I'm having some trouble with printing a page from our website. We have a specific page for printing some details which includes images. On this print-specific page, we strip out navigation, branding, etc, leaving only the users' data so they can get a clean print.
Much of that data takes the form of images, which may or may not have associated captions.
When we print from firefox, it prints correctly. However, printing from IE 7 the captions are often placed together, well above their associated image. It appears this way in 'Print Preview' as well.
The page structure is like this:
<head>
stuff
</head>
<body>
<div class="ContentDisplay">
<div id="contentcontainer" class="threecolumn general">
<div id="maincontent" class="content">
<div id="ctl00_mainContent_contentHolder">
<br></br><div>
<h2><span id="ctl00_mainContent_ctl02_lblGuestBook">Guest Book</span></h2>
<div class="tribute_holder">
<div class="tribute_info" style="padding-bottom: 1px;">
<p></p>
<p></p>
</div>
<div class="pagination audiopaging">
</div>
<br />
<div id="ctl00_mainContent_ctl02_gbPanel" class="tributes">
<div>
<h3>
Text</p>
</div>
</div>
</div>
</div><br></br><div>
<h2><span id="ctl00_mainContent_ctl05_lblImages">Images</span></h2>
<div id="ctl00_mainContent_ctl05_plainImages">
<span id="ctl00_mainContent_ctl05_plainImagesLabel"></span>
<div style="clear:both;"><div style="margin-left:auto;margin-right:auto;" class="torncontainer"><div class="tornborder">
<div>
<div>
<div>
<div>
<img src="image path" alt="caption 1" style="border-width:0px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin-bottom:2em;clear:both;">caption 1</div>
</div>
<div style="clear:both;">
<div style="margin-left:auto;margin-right:auto;" class="torncontainer"><div class="tornborder">
<div>
<div>
<div>
<div>
<img src="image source" alt="caption 2" style="border-width:0px;" />
</div>
</div>
</div>
</div>
</div></div><div style="text-align:center;margin-bottom:2em;clear:both;">caption 2</div></div>
etc.
To sum up, the actual image is contained in a 'tornborder' class div, which contains 4 nested divs and then the image (this class is used to render a graphical border around the image), followed by a div containing the caption. Both of these divs are contained in another div which has clear both.
When the 'Guest Book' div is not included (such as when that feature is not selected for printing) the images print correctly.
I've tried a LOT of different things, including removing all floats and clearing everything, but I cannot seem to get this printing to work correctly.
Any ideas?
EDIT: Just to make it clear, this is the relevant portion of the code, with a lot of hasty stripping of text done. All tags in the actual page ARE correctly closed and nested. The page is valid HTML.
EDIT the second:
Here's the relevant CSS info, this is the entire 'print' stylesheet:
/* Torn Border */
.tornborder div
{
background: url(/images/universal/tl.jpg) top left no-repeat;
float: left;
margin: 0 0 20px 0;
}
.tornborder div div
{
background: url(/images/universal/tr.jpg) top right no-repeat;
margin: 0;
padding: 15px 0 0 0;
}
.tornborder div div div
{
background: url(/images/universal/rb.jpg) top right repeat-y;
margin: 0;
padding: 0;
}
.tornborder div div div div
{
background: url(/images/universal/bl.jpg) bottom left no-repeat;
}
.tornborder div div div div img
{
background: url(/images/universal/br.jpg) bottom right no-repeat;
margin: -15px 0 0 0;
padding: 15px;
/*width: 130px;*/
}
#ie7andup .tornborder div div div div img, #ie6andbelow .tornborder div div div div img
{
margin: -15px 0 -5px 0;
display:inline-block;
}
A div around the whole page (just inside the body) allows for the specific targetting of IE7 via the '#ie7andup' div, placed there by conditional comments.