I have a page that renders fine in IE6/7 and Firefox 3.5. Both IE6 and Firefox 3.5 have no problems printing the page, but IE7 does. When the page is printed, the first half of my content div is not visible, with the exception of two tables that do show up. The content begins to reappear mid-sentence, where there is no tag or break of any kind.
It's almost like there's something hiding the first half of the div but letting the tables be shown. However, I have no out-of-place tags, no magic empty floating divs, or validation errors of any kind, and I have several other pages that use the same CSS that all print fine.
Has anyone ever experience anything similar? How did you fix it (if you didn't give up in frustration)?
Edit:
I finally got some more time to look into this, and I've narrowed down the problem pretty well. I can get all the text to appear by doing one of two things: changing the "position" style attribute of the div to something other than "absolute" (which causes the positioning to be all wrong), or by commenting out a small amount of the content.
Here is the content that can be commented out…
<p><strong>Personal Expenses: </strong>EJTH will bill your credit card for any additional expenses (extension <!--XXXX-->airfare, etc.), if applicable. <strong><!-- begin broken part --><em>All charges must be paid in full before your electronic ticket confirmation will be emailed. No payments will be accepted on-site. Note:</em></strong> When using a credit card for personal purchases (i.e., optional activities, trip extensions, conference registration fees, etc.), “MT” will appear as the vendor on your credit card statement.</p>
<p>You will also be responsible for any personal charges you incur. These include phone calls, valet and laundry service or personal bar bills. The resort cashier will keep a separate record of these expenditures for you. Be sure to settle your personal account at the resort front desk prior to departure. <strong><em>Important: If you neglect to pay your personal (incidental) account when you check out, EJTH will bill you after the program for the actual cost, plus a 15% service charge.</em></strong><!-- end broken part --></p>
Hope that helps you more than it helped me. I'm going to try and fiddle with the CSS to work around, assuming I don't get pulled into something else today.
Edit: Screens!
1st one is how the page currently prints. I put XXXX on the page where the content reappears; I also put it in the code above. You can see it if you squint a bit.
http://img109.imageshack.us/img109/589/current.jpg
2nd one is how the page prints if I change the CSS position of the content div to relative from absolute.
http://img514.imageshack.us/img514/9961/modcss.jpg
3rd one is how the page prints if I comment out the "Broken Part". That is, just fine.
Best Answer
Not quite an answer, I'm afraid, but it was getting a bit too lengthy for a comment...
In what way is the positioning "all wrong" when you change the
positionattribute? Are you talking about the positioning on the printed page, or in the browser? If it's in the browser, use a separate print stylesheet...Can you only "fix" the page by removing those two paragraphs, or does removing other paragraphs in that same div, and perhaps on the same printed page, that add up to about the same length also fix it?
A little Googling around does reveal that IE7 has issues with positioning and print. Have a look at the following links. They might point you in the right direction:
This post by "ThaSaltyDawg" from the second link looks the most informative, though it addresses a different (?) IE7 print bug:
Floats and absolutely positioned elements seem to give the most problems. So you're probably just going to have to go with your earlier "solution" of changing the
positionattribute on a div (in the print stylesheet), and then work your way through the rest to fix the broken layout.