CODEWITHSUNDEEP
cssfirefoxprinting
memical
memical

Reputation: 2493

Firefox prints extra blank page

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.

Upvotes: 10

Views: 15521

Answers (10)

Salil Rajkarnikar
Salil Rajkarnikar

Reputation: 754

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 */
}

Upvotes: 0

paaweel90
paaweel90

Reputation: 1

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.

Upvotes: 0

Daniel
Daniel

Reputation: 1472

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...

Upvotes: 0

Rstar37
Rstar37

Reputation: 534

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.

Upvotes: 0

Marty
Marty

Reputation: 1151

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

tr { page-break-inside: avoid; }

Upvotes: 0

Qafui
Qafui

Reputation: 31

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;
    }
}

Upvotes: 1

Daniel Congrove
Daniel Congrove

Reputation: 3669

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%.

Upvotes: 2

IMB
IMB

Reputation: 15889

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.

Upvotes: 2

Jacob Boyko
Jacob Boyko

Reputation: 101

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

Upvotes: 10

Alex
Alex

Reputation: 9031

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

Upvotes: 2

Related Questions