Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox print CSS - Extra blank page on A4 page

I created a simple print CSS which generates an A4 page.

<!doctype html>
<html>
<head>
<style media="print">
    * {margin:0;padding:0}
    @page {size: 297mm 210mm; margin:0mm;}
    html, body {width: 297mm; height: 210mm}
    html {background-color:red}
    body {background-color:green}
</style>
</head>

<body>
    <p>TEST</p>
</body>
</html>

With Firefox 38.0.1, in the Print Preview window, the body (green colored) has an extra height which triggers a second page firefox

If I print the file, 2 pages are printed, so it is not a problem related only to the print preview.

I already removed all the margins from the Page Setup section and all the extra elements which Firefox adds (like title, url, date, ...)

The same page on Chrome 43.0.2357.81 does not have any problem chrome

How can i solve that?

like image 609
Deviling Master Avatar asked May 31 '15 10:05

Deviling Master


People also ask

Why is Firefox printing blank pages?

Firefox can show blank previews and print blank pages if the configuration is corrupted. In some instances, Firefox prints only the second page blank, and it can also occur due to incorrect page settings. Fortunately, you can fix this issue with a simple browser reset.

How do I stop the second page from printing?

Click on the Office button and then on Word Options and then on Display and uncheck the box for "Print document properties" under the Printing options section of the dialog. Was this reply helpful?

How do I change print settings in Firefox?

1. To access the print settings, please see the upper, right-hand corner of the Firefox window, and select the Open Menu icon (highlighted in blue below). 2. Select the Print icon.


1 Answers

Use this, it will work straight forward :)

<!doctype html>
<html>
    <head>
        <style>
            @media print {
                * {margin:0;padding:0}
                @page {size: A4 landscape; margin:0mm;}
                html, body {height: 100%;}
                html {background-color:red}
                body {background-color:green}
            }
        </style>
    </head>
    <body>
        <p>TEST</p>
    </body>
</html>
like image 71
Julian Xhokaxhiu Avatar answered Nov 14 '22 23:11

Julian Xhokaxhiu