Geek Answers Handbook

Why do I see different font sizes when printing a page from an IFrame?

I have a simple tabular HTML page with a very simple stylesheet. 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 will call the page "ProblemPage.htm"

Now, on the ASP.Net page, I create an IFrame and load this HTML into an IFrame as follows:

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

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

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

When I do this and print, the version of Firefox looks exactly the same as when I load the page separately and print it. IE7 version reduces font size by about half.

Please note that page settings are pretty much the default. I used different printers and printed directly to PDF. I cleared my cache several times to make sure I use the same CSS. However, in the same IE7 session, the page itself prints one path, the page printed via the IFrame, as indicated above, prints in smaller fonts. Although in a single Firefox session, the page itself prints in exactly the same way as a page printed via IFrame.

Any ideas? It seems that some of my styles “leak” to the page when I print it in IE or that IE interprets a style other than IFrame.

UPDATE

Well, I think this is not a "leak of styles." If I put CSS CSS Reset in the ProblemPage.css file, it will definitely be selected 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 had a problem. A simplified test project did not show the same problem, and I suspect that there may be problems with the main pages, themes, or something like that. Interestingly, the problem did not occur on IE6, just on IE7.

I ended up hacking my way around the problem with conditionally commented CSS for IE7 only. This was the only part of the entire application where I had to use conditional CSS.

I would also like to get an answer (or even a few WAG as to what to look for next).

+4
source share
5 answers

Make sure that the page you are trying to print has the correct stylesheet. If some browsers cannot pull out the parent, others may not be.

+1
source

When you described the "smaller font size", it made me think of cases where I had a complex specification of "font-size: 0.8em" in my CSS. By folded, I mean that the text that showed the excess was inside the parent element, which had EM font size on it, and it had one.

I would not expect this to happen with an iframe, but I thought I'd throw it away just in case.

+1
source

Sounds weird. It is hard to diagnose without testing online, but:

  • does the same if you use window.print () from javascript on the parent page?

  • If not, how about a child frame calling a function or setting a variable in a script on the parent frame, which then (when controlling the return to the parent page through a timeout or polling) calls print () in its own window?

+1
source

Good afternoon! If you still have a problem, try this article .. This worked for me.

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

0
source

You can try the following:

 function pr(frameId){ var printed; var iframe = document.getElementById(frameId); var ifWindow = iframe.contentWindow || iframe; ifWindow.focus(); try { var printed =ifWindow.execCommand('print', false, null); } catch (e) { } if (! printed) { ifWindow.print(); } }
0
source

More articles:


All Articles