IE9 Standards mode not printing table body (tbody) when it spans pages

Question

I have a web page that displays data in a table from a database. I am using XHTML transitional 1.0 markup that validates through the w3c validator. The table of data can be quite large and will sometimes span multiple pages when printed. When the table has to span multiple pages, IE 9 will not print the tbody element (http://71.13.152.139/ietbodybug.html). When the table can fit on one printed page, IE 9 will print the tbody element (http://71.13.152.139/ietbodybug2.html). The second link is exactly the same page with less data. It does not matter if the page is rendered with compatibility view. It happens in both standard and compatibility view. When I go into the F12 Developer Tools and switch the Browser Mode to IE 8 or IE 7, the page prints correctly.

I have downloaded the Windows 8 Customer Preview and tested the web page in IE 10 desktop and the bug happens there as well.

Answer 1

Hi,

thanks for the great question with links to your mashups... it didn't take long to see a possible reason and workaround....

Ie9 and higher has improved standards compliance. I think you have to add a media attribute to your screen css file.

<link rel="stylesheet" type="text/css" href="ietbodybugglobal.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="ietbodybugprint.css" media="print"/>

I was able to test the above using the Developer tool to add a media attribute to ietbodybugglobal.css link

and then selecting the File/Preview menu.

As you can see from my screen shots some more work has to be done by you to get the pint media layout correct. start by validating your css files (http://jigsaw.w3.org/css-validator/#validate_by_input )

or to test your pint only layout add a screen media to the second link

<link rel="stylesheet" type="text/css" href="ietbodybugglobal.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="ietbodybugprint.css" media="screen print"/>

remove the second screen media link after testing...

Usually the print media only stylesheet is a lot less complicated than yours.... containing only style rules to hide elements... you both hide and show elements....

to hide an block element you need both display:none; visibility:hidden, so the counterpart display:block;visibility:visible needs also to be in your screen media only stylesheet link.

OR

You can just add the IE8 x-ua meta tag to your page... (this can be tested by toggling the DocumentMode using the Developer tool... you have already confirmed this)...http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx

Bug reports for IE10 can be posted at http://connect.microsoft.com/ie

I think you should raise an issue ticket at connect as this is a bug in IE10 and we should document it and also the workaround for the benefit of others...

there are a few consumer complaints about missing data in Print Previews...

If you like we can raise a ticket and refer back to this thread.

Regards.

---

Rob^_^

Answer 2

Hi,

I whent ahead and posted a ticket at connect with the workaround.

https://connect.microsoft.com/IE/feedback/details/729895/missing-content-in-print-and-print-preview-in-ie9-and-above

can you please keep your test pages on your servers for a few weeks for the IeTeam to test?

Regards.

---

Rob^_^

Answer 3

Thanks for the post, Rob. I can take away the print stylesheet and the problem is still present. I'm only using the print stylesheet to hide elements that don't need to be in the printed version. The CSS will not validate because I have styles in there for border radius, opacity, etc, but the browser should be ignoring those if it does not understand them.

Thank you for posting a ticket and I will keep the pages up for the IE team. I'm going to try to find which style(s) are causing the issue. If I find anything I will keep this post and the ticket up to date.

Answer 4

It has to do with a float left on the parent element. If I set float:none on the parent element (div.section), the table prints as expected.

Answer 5

I am unable to view the ticket (404 error).

Answer 6

try this link

http://connect.microsoft.com/IE/feedback/details/729895/missing-content-in-print-and-print-preview-in-ie9-and-above

---

Rob^_^

Answer 7

Hey thanks for posting this! I was having the same issue and this fixed my problem!

Answer 8

This worked for me as well. We used Twitter Bootstrap and a div element 2 steps up had 'span9' applied to it.  Using float:none on the print media for this element fixed the issue.

Answer 9

The answer proposed by awilinsk worked for me... the joys of developing for ie....