Strange IE7 Printing Bug

Question

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.), &ldquo;MT&rdquo; 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.

http://img514.imageshack.us/img514/653/commented.jpg

Answer 1

OK... I created a new CSS sheet and specified it for media="print". In this stylesheet, I stripped away all the formatting and navigation, and caused the content to print out completely. This works fine in IE7 and Firefox. Thanks to everyone that helped!

Answer 2

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 position attribute? 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:

• http://www.webmasterworld.com/css/3408611.htm
• http://www.techsupportforum.com/microsoft-support/internet-explorer-forum/162695-cant-print-specific-html-ie7.html

This post by "ThaSaltyDawg" from the second link looks the most informative, though it addresses a different (?) IE7 print bug:

Through trial and error I found a fix for my issue. It was CSS as I had guessed. Using the combinations of float, position, z-index, and a few other elements caused some unexpected results in IE. After going to the Microsoft Support page I found there is a bug with IE concerning this.

In my case using a float value with <table> is frowned upon in IE. It displays ok, but not so well for printing. Also make sure your position value is correct. And if you are nesting <table>'s and <div>'s make sure your z-index is correct.

There is no real set way to set these things, it depends on there usage because several of my pages had to have different tweaks.

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 position attribute on a div (in the print stylesheet), and then work your way through the rest to fix the broken layout.

Answer 3

Even with a print stylesheet, I found IE7 (and sometimes IE8) ignored certain styles.

After a bit of testing, it seemed to be because the class names I referred to were in html5 tags. If you have wrapping divs though, you can just target them, which seemed to solve the problem for me.