Firefox prints extra blank page

Question

I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:

It prints just the header on the first page. The rest of it is blank. The actual content is shown only on page 2.

Googling a bit about it i found that the "float: left" style is causing it. If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.

Is there a solution to this problem?

Thanks.

score 10 · Answer 1 · answered Jan 09 '12 at 17:34

10

Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.

Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.

JAB

answered Jan 09 '12 at 17:34

Jacob Boyko

101
1
3

The same thing happened to me, in Chrome, and to an anchor element. Setting the margin to 0 and using padding instead fixed the problem. – Ryan Burney Apr 12 '13 at 01:13
In my case, I had a div element at the top of the hierarchy whose height was at 100% and that was the issue. Changed it to 98% and the issue was gone. – Deepak G M Oct 19 '15 at 07:57

score 2 · Answer 2 · answered Feb 19 '15 at 19:40

2

I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.

answered Feb 19 '15 at 19:40

IMB

15,163
19
82
140

score 2 · Accepted Answer · answered Sep 13 '11 at 09:14

2

Try using a print style sheet:

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

In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.

Al

answered Sep 13 '11 at 09:14

Alex

8,875
2
27
44

thank you for your answer Alex. however if i remove the float the layout will not be the same on print as on screen. – memical Sep 14 '11 at 08:30
Im with you, can you post a link? – Alex Sep 14 '11 at 08:58
Just FYI: Adding overflow:visible to content container fixed the same bug for me. – vlad saling Mar 28 '12 at 10:24

score 1 · Answer 4 · answered May 10 '18 at 16:06

1

The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.

To fix, just add a print style setting display: block and min-height: 100%.

answered May 10 '18 at 16:06

Daniel Congrove

3,519
2
35
59

score 1 · Answer 5 · answered Jun 08 '18 at 19:46

Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.

Setting the rule to middle as shown fixed it

@media print {
    table tr td {
        vertical-align: middle;
    }
}

score 0 · Answer 6 · answered Nov 24 '19 at 21:42

0

I have my content in a table and this fixes the problem.

tr { page-break-inside: avoid; }

answered Nov 24 '19 at 21:42

Marty

974
9
25

score 0 · Answer 7 · answered Feb 01 '21 at 18:16

0

After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.

answered Feb 01 '21 at 18:16

Rstar37

454
5
6

score 0 · Answer 8 · answered Jan 19 '22 at 01:33

I also had a blank page as my FIRST page. I got around this by using:

position: absolute;
top:0;

This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)

@media print {
    .print\:hidden {
        display: none;
    }
}

I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.

Would have liked to been able to figure out the root problem tho...

score 0 · Answer 9 · answered Nov 30 '22 at 13:18

0

For those who use Bootstrap: In imported _print.scss file they set

page-break-inside: avoid;

on tr element. That was causing extra blank first page in my case.

answered Nov 30 '22 at 13:18

paaweel90

1

score 0 · Answer 10 · answered Aug 03 '23 at 09:58

Firefox might interpret page size and margins differently than other browsers. Try adjusting the @page rule in your print-specific CSS to see if it affects the behavior. For example:

 @page {
  size: A4 portrait; /* Adjust the size and orientation as needed */
  margin: 1cm; /* Adjust the margins as needed */
}

Firefox prints extra blank page

10 Answers10

Linked