Attorney Approved Web Design Contract
Due to the popularity of our web development contract template, we're offering the contract, estimate, NDA and invoice templates for $199.50 $49.50 if you order by March 15. Click here to learn more.
Constant Contact E-Newsletter Service - get 60 days free!
Constant Contact has been in business since 1996 is one of the most reliable and trusted email marketing services around. Click here to activate your free 60 day trial courtesy of CWD Community.
Firefox Printing : Content Overflow
Why Does Print Preview Overflow Content in Firefox?
I ran into this problem with a client of mine - and it took us a while to narrow down the issue. The problem was that in print preview, Firefox was not clipping the page. In other words, 5 pages of content would show as 1 page and the excess content would simply overflow across the bottom page border.
The Solution
I first realized that the problem was being created by a JavaScript function. Through various levels of debugging we finally narrowed the problem down to the following line:
object.style.overflowY = "auto";
Overflow Property Syntax
- HTML : { overflow-y : sOverflow }
- Scripting : [ sOverflow = ] object.style.overflowY
Overflow Property Values
sOverflow is a String that takes on one of the following values:
- visible : Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.
- scroll : Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
- hidden : Content that exceeds the dimensions of the object is not shown.
- auto : Content is clipped and scrolling is added only when necessary.
Reference: MSDN Library : overflowY Property
Value for Printing
The only value of the above that will appropriately flow content for printing in Firefox (by creating page breaks), at least in our case, is scroll. Please post any comments below.
 |
 |
 |
Big Stock Photo : millions of royalty free stock photos and illustrations, starting at $1 per photo. Use promo code HW2333 to obtain free credits when you sign up.
Due to the popularity of our web development contract template, we're offering our attorney approved contract, estimate, NDA and invoice templates for $199.50 $49.50 if you order by March 15. Click here to learn more & download.
StreamSend is Email Marketing by Marketers, for Marketers. Friendly and easy to use interface, private IP address, trigger-based messaging, demographic reporting, integration with Google Analytics, and more. Free 30 day trial.
Need a website or web project completed asap? Fill out our quote for services form.
Learn how to increase your website traffic, and analyze visitor data so you can optimize your sales campaigns. You'll find it all and more on our sister website, Guru of Search.
- Open Paypal button in new window
2 days 9 hours ago - Thank you
2 days 9 hours ago - Letter Me Later
2 days 9 hours ago - Lightning Strike
2 days 9 hours ago - Incredibly inefficient iContact
2 days 20 hours ago
Overflow in Every Case?
Does this mean that the CSS overflows in every case where the value is not set to "visible"? Or does this only apply to your specific example?
CSS Overflow Property
The overflow property defines what happens to an element's content that overflows its area. So the overflow values work as described above as long as browsers offer support. Support is not good in Opera and incomplete in IE 4,5.
CSS Equivalent?
What is the CSS equivalent of this?
Thanks,
Brian B
CSS Overflow Example
An example of a CSS overflow declaration:
p { overflow : scroll }
The possible values are listed above in the article. The overflow property is supported poorly in Opera and experiences some peculiarities in IE 4,5.
Javascript overflow: auto printing issues in Firefox
Hi everyone,
I hope somebody has a resolution for the following issue:
I am using Javascript to create a border around the body of the pages within the "main" frame of my web site, and then using a DIV tag with a style set to "width:100%; height: 100%; overflow: auto" to then force the scrollbars for overflowing content to be created inside the frame border for appearances sake. This is the appearance and the layout which I want, and it works with Firefox, IE 5.5/6+ and Netscape 7x browsers, and other browsers which are CSS compliant and which support the CSS document.getElementById property. This appearance also allows me to easily create different colored borders for the document within the specific frame to match the content.
Yet, when I try to print preview in the above browsers, nowhere close to the entire page shows in the print preview. It is as if the document gets chopped off at the bottom based on the browser's computer screen viewing window. Try it for any document which loads in the large bottom right frame. You will see what I mean even if you open the link for this bottom right frame in a new window or tab.
So my question: Is there some CSS coding trick which I can add to tell the browser, yet only when printing or doing a print preview, to automatically set all frame scrolling to "auto" instead of the current "no"? I currently use "no" for all frames to allow for the colored borders to be created around the frame, and then am using a small javascript in each page to draw the border around the document body plus a DIV tag to set scrolling to "auto".
Check it out at:
http://www.adaptall-2.com/
I hate to go back to my old frames method which used numerous frames to create the "border" around the content of the actual document frames. Besides, I couldn't auto-update the colors of the "borders" using my old method.
Thanks in advance!
--Michael
help
Hi there
I have tried using your code but it doesnt seem to work?
Do you put the script part in a function, and how do you call the function? and also
Where do you put this "{ overflow-y : sOverflow }" in your css or html?
Im a little confused since it wont work for me.
Cheers Jade Francis
Hi Jade,
Hi Jade,
you can use the overflow property in your CSS. Simply add it to the element you wish to modify:
You can also set it via Javascript:
Does this answer your question?
Netscape
apparently overflowY = "scroll" does not work in Netscape on firefox engine
Geoff
I had a problem with firefox and the content not clipping when printing for firefox. Then I discovered that someone set body {height: 100% } in the page's stylesheet. The rest, as they say, is history. And the math question I had was 5 + 9, which apparently isn't 14. [Do I need to go to a calculator to double check??] My question now is 4 + 1, if I get it right you'll know but you need to fix something about this spam inhibitor.
Glad that fixed it for you
Glad that fixed it for you Geoff :) As for the math question, I'll have to make a note of that - I've never heard of it being wrong (but then again, there's a reason computers crash).
How to Fix it?
So where is a fix? I was trying to get it done on my page which uses XML and XSL, but the pages still overflow? Can somebody give an example where to put the code?
Thank you.
Len
Another reason why content overflows in Firefox
If you have an absolutely positioned element that extends longer than the length of the page, it will print preview and print correctly in every browser I tested on (Opera, IE, Safari, Camino) except for Firefox. Firefox will keep that absolutely positioned element on the first page and not let it bleed onto subsequent pages. The overflow element trick above does not correct this problem.
To fix this, implement the following:
<style type="text/css" media="print">
.classname
{
position: relative;
}
</style>
Therefore, when you print preview or print, the object will display properly and extend onto subsequent pages.
Yet Another Reason ...
Thanks for getting me on the track with your fix. I wasn't using absolutely positioned elements, but I found the same to be true with floated elements. So I just did:
float: none;
... for that element, because the float was not necessary on the print page.
Firefox 2 Printing Fix
<style type="text/css" media="print"> body { overflow-y : visible } </style>fixed the lack of printing pagination for me in Firefox 2.0.Another Fix for Firefox
* {
overflow: visible !important;
}
worked for me. Your post was really helpful. Thanks!
Same goes for floated elements
Thanks for getting me on the track with your fix. I wasn't using absolutely positioned elements, but I found the same to be true with floated elements . So I just did:
float: none;
... for that element, because the float was not necessary on the print page.
Printing in Firefox
Looks like the latest update to Firefox 3 corrected this issue? Is anyone still experiencing this problem?
Yes
I am using Firefox 3 but it doesn't support overflow: visible; or overflow: none;
Extra page problem
There is one page left blank and then print of data is displayed. This thing is only happening in FireFox.
Page Printing Problem
When I did print preview of any .aspx Page one page would be left blank, and after that the other page would display. How can I over come this problem?
This problem is only happening in FireFox.