position static causes extra blank page in print

[CharlesEF]

Hi All,

I have a sample page http://www.cef-inc.com/testing/ff_print.html. If you load this sample and then do a print preview you will see a blank last page. If you inspect the header element and remove '<h2>Xxxxx Yyyyy Zzzzz</h2>' then no more blank last page.

Is this by design? Is my 'fixed' layout page to blame?


Thanks for any help,

Charles

[CharlesEF]

Anyone?

[Lnwdz]

Edit: Was irrelevant to actual problem

[CharlesEF]

I was hoping to not have to make adjustments, like you have shown. And yes, I tried 4 different browsers and they all do the extra blank page. Position: absolute works great in Firefox and Chrome but not IE 11 and Edge. The problem is that IE and Edge will only print 1 page of a multiple page form. I think MS has a bug but since I can't get past the trolls at MSDN I can't ask MS about it (they blame my fixed layout design. They suggest I fit into the 'box' by looking into frameworks and/or templates). Position: static solves the IE/Edge problem but causes the extra blank page.

Maybe this question should be moved to the web development forum?


Thanks for your input,

Charles

[morat]

See if anything in these threads are helpful in your case.

http://stackoverflow.com/questions/3697444
http://stackoverflow.com/questions/10902686

[DanRaisch]

Moving to Web Development per request.

[CharlesEF]

Thank you,

Charles

[Frenzie]

Is my 'fixed' layout page to blame?

This is a question that takes ten seconds to test, so it should not be up to anyone reading this. The answer is no.

You can either try to figure out where you're inserting extra pixels through margin, padding, borders, etc. or just stick something like this in your print styles:

Code: Select all

html, body {height:99%}

[jscher2000]

Either of these will fix it by preventing top margin collapsing on the header -- the phenomenon of the top margin of the first element in a container poking out of the top of its containing element, which you can see by the position of the h2 within the header -- but I'm not sure why the second page is generated in the first place:

Code: Select all

#header {
  border-top: 1px solid red;
}


Code: Select all

#header {
  padding-top: 1px;
}


----

Actually, I think Frenzie has the answer: you have 100% height for the body. Somehow the margin-collapsing on the h2 is causing the page to exceed 100%.