Firefox css printing issue

Question

I have an html page that I want to print. This page has a css formatting to it. When I go to print it out in Firefox, the print preview and the printed version has my data overlapping each other on the page breaks. I am not currently controlling page breaks in my css. Here is a screen shot of the print preview in firefox. Notice the overlapping!

enter image description here

Not sure why this is happening or how to resolve. Has anyone seen this problem before? Thanks for the help

• Richard S.: I did forget to mention that the same css and html page prints great in google chrome.
• j08691: "I am not currently controlling page breaks in my css". And since this seems like a viable solution, why haven't you tried this?
• Richard S.: I have tried this but took it out since it did not change the issue. For some reason , any data the spills over onto the next page looks like my screen shot above. It seems that there is another underlying issue with firefox i am missing since every thing work well in chrome and IE.

Answer 1

Finally found the issue, and wanted to post it in case some one else runs across the same thing. In my css I had

overflow: auto;

I totally forgot I even had this in there so changing it to

overflow: visible;

that fixed the printing issue. Hope this will help someone!

• Tomasz Gandor: The most radical way to do it is @media print { * { overflow: visible !important; }} - which I put into my stylesheet. However, it does not work in some cases... This is seriously broken in Gecko (or just Firefox?) - the WebKit- and Trident-based browsers handle it OK. Not to mention page-break-inside: avoid; for not cutting lines in half!