Why am I seeing different font sizes when printing a page from an IFrame?

Question

I have a simple, table based HTML page with a very simple style sheet. I can open the page in IE7 and FireFox 3 and it looks exactly the same. I can print the page from both browsers and it looks exactly the same. We'll call the page "ProblemPage.htm"

Now, inside an ASP.Net page, I create an IFrame and load that HTML into the IFrame like this:

window.frames[iframeId].location.href = "../ProblemPage.htm";

When the user clicks a button on the ASP.Net page, it calls a function that does this:

window.frames[iframeId].focus();
window.frames[iframeId].print();

When I do that and print it, the Firefox version looks exactly the same as it did when I loaded the page separately and printed it. The IE7 version reduces all of the font sizes to about half.

Note that the page setup settings are pretty much set at their default. I've used different printers and printed directly to PDF. I've cleared my cache repeatedly to make sure I'm using the same CSS. Yet on the same IE7 session, the page by itself prints one way, the page printed via an IFrame as above prints with smaller fonts. While on a single Firefox session, the page by itself prints exactly the same as the page printed via the IFrame.

Any ideas? It appears that may some of my styles are "leaking" into the page when I'm printing it on IE or that IE is interpreting the styling different within the IFrame.

UPDATE

Well, I guess it isn't "leaking styles". If I put the Yahoo CSS Reset in the ProblemPage.css file, it is definitely picked up by both browsers in all four cases, but the problem remains: When IE prints the page from the IFrame, the font sizes are screwed up.

UPDATE 2

Never found the problem. Simpler test project didn't show the same problem and I suspect there may be a problem with master pages, themes, or something like that. Interestingly, the problem did not occur on IE6, just IE7.

I wound up hacking my way around the problem with conditionally commented CSS for IE7 only. That was the only part of the whole app where I had to used conditional CSS.

Still would like to have an answer (or even a few WAGs as to what to look for next).

Answer 1

Make sure that the page you are trying to print has the correct stylesheet referenced. If not some browsers may pull in the parent, whiles others may not.

Answer 2

When you described "smaller font size" it made me think of the occassions in which I had a stacked "font-size: 0.8em" specificaion in my CSS. By stacked I mean that the text that was showing up extra small was inside of a parent element which had an EM font size on it, AND it had one itself.

I wouldn't expect that to happen with an iframe, but I thought I'd throw that out there just in case.

Answer 3

Sounds odd. Difficult to diagnose without a test online, but:

• does the same thing happen if you window.print() from JavaScript in the parent page?

• if not, how about having the child frame call a function or set a variable in a script on the parent frame, which then (when return controls to the parent page through a timeout or poll) calls print() on its own window?

Answer 4

I have a similar problem on a project I am working on. Everything looks nice, except a JS dialog box which seems to pick up some styling from the parent page or something. Definitely seems like 'leaking styles' to me as some of the colors in the iframe matches some from the parent page, all of a sudden.

Have been struggling with this issue for weeks and months, without solving anything. I've tried including the iframe in different ways (iframe in HTML with empty src, then updating src with JS, as well as creating the whole thing in JS and appending it).

This is really confusing and annoying...

Answer 5

Good afternoon ! If you still have the problem, try this article .. It worked good for me.

http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution