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.
Jaffer Haider 
The overflow solution worked for one of my problems.
Thanks for this article.
Thanks Brandon, great to hear that it helped you …
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!
Thank you so much! I fixed the problem:).
[…] The details and thankfully the solution are described on Jaffer Haider’s blog […]
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.
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 😉
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.
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.
[…] Solution: First of all see A List Apart – Print your way and Fix for the firefox css one page printing problem bug. […]
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
Brilliant! all solved!
Thanks! really helpful this post
thanks man, I was almost going up the walls because of this!
Thanks for this! Fixed my problem!
thanks for your post,
i have resolved my problem
thank you against
I was trying to ‘unfloating’ only, but the problems continued.
Using all the tricks above, of the problems were resolved.
Thank you!
overflow:visible!important; solved my problem! Thanks
thank you, i wasted tens of pages trying to solve this thing out till i landed here
than you
Thks for this article, I had problems with a css print in firefox from a long time ago & reading here I can fix problem.
The overflow: visible!important; safes my project… 😉
I faced this bug this afternoon, googled it and ended up here.
After testing the reported possibilities, i tried to reproduce it in another document, floating some elements, setting overflow to hidden and setting position to absolute in some others, and for my surprise, i could print it perfectly.
So a tried do set this properties to some elements that were larger than the page (i.e. the body tag, or a large container), and then the bug showed up.
Apparently, at least in my case, the bug occurs when there is a floated, hidden overflow, or absolute position element larger than the printed page.
I’m using Firefox 3.6.3 here.
Hope it helps, and sorry for any grammar mistake 😉
Wow, I had this bug too. Thanks to your suggestion about overflow I solved it. I would like to add one thing though that might be of immense importance when working with these types of issues. All css-elements can be overridden with the ‘*’ identifier: this means you can for instance do “* { overflow: visible !important }” and all css attributes will get the sticky fix of having their overflow set to visible. You might want to revise the suggestions. This worked for me though, didn’t have to address the other suggestions.
Thank you so much!
Evan-
This last tip is worth a million. Thank you!
This isn’t a fix, it’s a workaround.
If you’re a coder you can make your page work. But you don’t solve the problem for us normal folks.
Can someone post a link to an extension that adds the needed coder-gibberish the way you say it needs to be so we non-coders can print normally?
Ouch. That’s a nasty one. And I thought I had a problem with my CSS…
Great Great Great!!!!
You really saved me from my Boss’s shouting..
Thanks a lot..
Thanks for the article. I tried a lot of other solutions before stumbling onto your article; and your float and overflow solutions solved all my FF print issues. Thanks again
Please go to the following bug and add a comment documenting this problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=258397
If more people report this problem, there is a better chance they will fix it.
yes this fixed my problem I had to switch both floats and add overflow
very good blog, very interesting article, very information requiring.
Fabulous post! Outstandingawareness on the subject. Without a doubt a fresh bookmark.
Thanks, was scratching my head to find a solution for this.
[…] I also used this post as a reference by Jaffer Haider: https://jafferhaider.wordpress.com/2007/12/29/fix-for-the-firefoxcss-one-page-printing-bug/ […]
Thanks very much, was changing anything and everything before searching for a solution.
I stumbled upon this page looking for a solution to Firefox only printing one page of a two page table. The solution that finally worked for me is in the link tag of the page. When I had the problem, the media attribute for the link tag for the master.css was “all” and the one for print.css was “print”. This only allowed printing of one page in Firefox, but when I switched the value of the media attribute in master.css to “screen”, I was able to print all the pages.
Not quite an overflow problem, but it may help others who come across this site.
I have the same/similar problem; Firefox (various releases of it) won’t print the body of my text, just the header and/or the footer. If I use Internet Explorer, it works fine. The fixes listed seem to address my problem, but I haven’t the foggiest notion of what to do with those “fixes.”
Can anyone direct me to where the gobbledegook goes?
Hi Len,
You’ll need access to the source code of the webpage to apply these fixes. In particular you will need to add these fixes to the CSS of the webpage.
overflow: visible !important; worked for me
This page was great for fixing this issue. But the issued reappeared when I upgraded to FF4. Finally got around to fixing it again. In a nutshell, had to add the class
div.pageContainer {border: 1px solid transparent}
to each page’s containing div to prevent the issue. ONLY IN FF4, STRANGE! Still works perfect in all other browsers except Chrome dev 1’s2 new preview function. It’s doubling the page breaks. Arrggh.
Canceling out the floats using the supplied .css code did the trick for our older .html pages and Firefox. Good tip!
I had a problem with printing multiple pages with position:absolute elements on the pages all ending up on the same first page on top of eachother. I solved it by setting position:relative in the page container divs.
Here is the code for the problem:
.papper {
height:24.5cm;
margin-top:0.8cm;
page-break-after:always;
}
.fraga {
position:absolute;
}
F1
F2
F3
in the papper class i then add position:relative and it all works.
/Simon
Another one to add to the list. Opacity wasn’t printing for me after the first page if it spanned a page break in FF 3.6.
Thank you very much !!!!!!!!
Thank you, this post gave me the answer after 2 weeks 😀
using * { position : relative !important; } on the media=print fixed my problem
Yay! I’m glad it helped. 🙂
thank you, removing height = “100%” fixed my issue
Setting margin: 0 !important; helped me.
For me, removing a {display: inline-block;} on a main made the trick.
+1
Hey, it’s an old post, but – my problem was actually the fieldset
http://stackoverflow.com/questions/5469569/workaround-for-ff-printing-fieldset-truncated-to-one-page-bug-471015
If you’re like me and you’ve tried 1,000 combinations of every known CSS trick and it still wont work, this is my solution:
var browser = navigator.appName;
if (browser == “Microsoft Internet Explorer” || browser == “Netscape”) {
window.print();
} else {
alert(“Please use IE or Chrome to print this page to ensure you get all pages.”);
}
In my case, my page is very simple. It’s just a pop-up window. I have doctype, html, head, title, body, and of course Style. The only contents in the body is a single image (though it’s large enough to need 2 pages.) The only think that comes to my mind is that my image’s source (ImageUrl in asp.net) is an ashx result. So maybe firefox doesn’t realize the size of the image? Oh well.
is there any solution for fieldset print problem in FF ?
Please let me know if you’re looking for a author for yoyr site.
You have some really great articles and I feedl I would be a good
asset. If you ever wwant too take some off the load off, I’d absolutely love to write
some articles for your blog inn exchange for a link back to mine.
Please shoot me an email if interested. Thanks!
I was suggested this website by my cousin. I am not sure whether
or not this post is written by way of him
as nobody else know such detailed about my difficulty.
You’re incredible! Thanks!
Great page of information!…for me the tip in some of the comments of using a print specific css with just this in it:
*{overflow:visible !important;}
Resolved my printing problem in IE 8
the floating elements fix helps me a lot, in firefox and Internet Explorer printing !
Thank you !
thanks a lot. got a lot of good advice from this article. you definitely saved the hair on my head 😉
I am still unable to resolve the issue after going through the above steps. Is there anything that we need to look into apart from above ?
Hey there,
none of the steps above solved my problem either.
I’ve had a main content box and a sidebar box displayed inline-block to put them next to each other.
By setting both boxes to display:block recently solved the problem Yay!
Yes!! display : block on the main container worked for me! thanks!!
[…] Also, overflow settings can cause the same problem. Several fixes detailed at: jafferhaider.wordpress.com/2007/12/29/… […]
Very good website you have here but I was wanting to know if you knew of any message boards that cover the same
topics talked about in this article? I’d really love to be a part of group where I can get advice from
other knowledgeable individuals that share the same interest.
If you have any recommendations, please let me know. Thanks a lot!