Fix for the Firefox/CSS one page printing bug

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.

About these ads

55 thoughts on “Fix for the Firefox/CSS one page printing bug

  1. Brandon says:

    The overflow solution worked for one of my problems.
    Thanks for this article.

  2. Thanks Brandon, great to hear that it helped you …

  3. sg says:

    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!

  4. N says:

    Thank you so much! I fixed the problem:).

  5. [...] The details and thankfully the solution are described on  Jaffer Haider’s blog [...]

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

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

  8. James says:

    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.

  9. Albert Kok says:

    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.

  10. [...] Solution: First of all see A List Apart – Print your way and Fix for the firefox css one page printing problem bug. [...]

  11. Gibb says:

    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

  12. Kat says:

    Brilliant! all solved!

  13. Thanks! really helpful this post

  14. Birgit says:

    thanks man, I was almost going up the walls because of this!

  15. Sharon says:

    Thanks for this! Fixed my problem!

  16. mohand says:

    thanks for your post,
    i have resolved my problem
    thank you against

  17. I was trying to ‘unfloating’ only, but the problems continued.
    Using all the tricks above, of the problems were resolved.
    Thank you!

  18. overflow:visible!important; solved my problem! Thanks

  19. Jojo says:

    thank you, i wasted tens of pages trying to solve this thing out till i landed here

    than you

  20. Caye Utrilla says:

    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… ;)

  21. Jean Phillipe says:

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

  22. Evan Carroll says:

    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.

  23. Jay Collier says:

    Evan-

    This last tip is worth a million. Thank you!

  24. No One In Particular says:

    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?

  25. Sri says:

    Great Great Great!!!!
    You really saved me from my Boss’s shouting..
    Thanks a lot..

  26. soup says:

    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

  27. teancum says:

    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.

  28. dan says:

    yes this fixed my problem I had to switch both floats and add overflow

  29. very good blog, very interesting article, very information requiring.

  30. craft makers says:

    Fabulous post! Outstandingawareness on the subject. Without a doubt a fresh bookmark.

  31. adardesign says:

    Thanks, was scratching my head to find a solution for this.

  32. [...] I also used this post as a reference by Jaffer Haider: http://jafferhaider.wordpress.com/2007/12/29/fix-for-the-firefoxcss-one-page-printing-bug/ [...]

  33. James says:

    Thanks very much, was changing anything and everything before searching for a solution.

  34. Ced says:

    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.

  35. Len Leeb says:

    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?

  36. Vignesh says:

    overflow: visible !important; worked for me

  37. Jim Hapenney says:

    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.

  38. Gary Moses says:

    Canceling out the floats using the supplied .css code did the trick for our older .html pages and Firefox. Good tip!

  39. Simon says:

    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

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

  41. Rangana Minesh says:

    Thank you very much !!!!!!!!

  42. Goodwine says:

    Thank you, this post gave me the answer after 2 weeks :D
    using * { position : relative !important; } on the media=print fixed my problem

  43. mintocity says:

    thank you, removing height = “100%” fixed my issue

  44. K6pski says:

    Setting margin: 0 !important; helped me.

  45. Toro says:

    For me, removing a {display: inline-block;} on a main made the trick.

  46. Suamere says:

    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.

  47. Osama says:

    is there any solution for fieldset print problem in FF ?

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

  49. nuvem.tk says:

    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!

  50. Peter says:

    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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: