I ran into Firefox’s CSS printing bug that would only print one page and let the content overflow (without clipping the page). The actual bug is documented here by Mozilla.
After scouring the Net for a fix, I found that it can be caused due to a number of reasons. Here’s the list of fixes that should help you out if you’re facing this bug:
Floating Elements
You need to unfloat all floated elements in your CSS for print media, like so:
.my-floated-elements {
float: none !important;
}
Overflow
Overflow must be set to visible for elements that have might have fancy overflow settings:
.css-element {
overflow: visible !important;
}
It’s always good to set this property for the <body> tag (or any other topmost parent element that is housing contents to be printed). Additionally, in some cases, overflow: scroll might work in some cases instead of overflow: visible. It greatly depends on your layout.
Position
If your elements are positioned absolutely, then you might need to position them relatively:
.css-element {
position: relative;
}
Height
If the height of your body is set to 100%, that may also cause a problem. Try unsetting this property.
UPDATE
Thanks to Gérald Champavert for pointing out that setting width to ‘auto’ for container divs might also help in solving the problem.
The overflow solution worked for one of my problems.
Thanks for this article.
Comment by Brandon — February 24, 2008 @ 9:30 pm
Thanks Brandon, great to hear that it helped you …
Comment by Jaffer Haider — February 24, 2008 @ 9:49 pm
The overflow:visible solution also worked for me, but I needed to add it for each element I have included in my print stylesheet.
Thanks!
Comment by sg — February 26, 2008 @ 10:21 pm
Thank you so much! I fixed the problem:).
Comment by N — February 28, 2008 @ 7:27 pm
[...] The details and thankfully the solution are described on Jaffer Haider’s blog [...]
Pingback by A Funnelweb World » Blog Archive » Print-only stylesheets and the firefox bug — March 1, 2008 @ 1:26 pm
Thank you very much Jaffer !
All you wrote in this blog was very useful for a website I developed and where I use almost all the time divs. I just can add that I needed to set “width” parameters to “auto” for my divs in order to be able to print all my site without problem.
Comment by Gérald Champavert — March 1, 2008 @ 3:27 pm
Thanks Gérald, good to know that you’ve found my blog useful. I’ve added your width:auto solution to the main text of the post, thanks for pointing that out.
I’ll be sure to use your site if I get a chance to go to London
Comment by Jaffer Haider — March 1, 2008 @ 4:57 pm
Ive noticed one more that breaks firefox….
clear:none
havnt got a work around for it yet.
They do appear to all be working though without these fixes in Firefox 3.
Comment by James — May 8, 2008 @ 8:44 pm
If none of the above fixes the 1-page printing problem to you, then set your body’s CSS like this:
overflow-y : visible !important;
Its the only fix not yet mentioned here.
Comment by Albert Kok — February 11, 2009 @ 3:41 pm
[...] Solution: First of all see A List Apart – Print your way and Fix for the firefox css one page printing problem bug. [...]
Pingback by Printer Friendly CSS for Firefox « I KNOOW! — March 25, 2009 @ 12:07 am
Hi Jaffa,
I have had problem printing floating columns in Firefox and I have tried so many suggestions from the web, but this suggestion works, specifically the float: none; and overflow: visible; Much appreciated. Gibb
Comment by Gibb — May 12, 2009 @ 3:03 pm
Brilliant! all solved!
Comment by Kat — May 18, 2009 @ 12:04 pm
Thanks! really helpful this post
Comment by Md. Kausar Alam — July 9, 2009 @ 1:11 pm
thanks man, I was almost going up the walls because of this!
Comment by Birgit — August 27, 2009 @ 4:53 pm