Feb 01 2007
Last update:

Firefox Printing : Content Overflow

Filed under: Web Browsers » Firefox,
 

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.

Your rating: None Average: 1.9 (29 votes)

Need to Organize? Visit Shoeboxed.com (Affiliate)

 
Your rating: None Average: 1.9 (29 votes)
Email this page PDF of this page Print this page
Leave a comment
(27)



Hello... It's 2013

Hello, it's 2013 and this buggy feature seems to still exist after 10 years since Mozilla 1.x. Some pages print out nice with Firefox, some not. With Internet Explorer and Chrome every page is printed, so it is definitely a Firefox issue!

Worked for me

Hi. Thanks a lot for pointing me in the right direction. I added an "overflow:visible" in my stylesheet for printing, and voilà, it worked like charm. With "overflow:scroll" the result was as bad as with "overflow:hidden".

I have done paging and

I have done paging and sorting using javascript for html table. However for print I want to print all pages, so I write following in stylesheet. Firefox is not overflowing content to second page when printing, chrome does it, but I have background color issue with chrome printing.

@MEDIA print{

.sortable TR {
display:table-row !important;
overflow: visible !important;
position: relative;
}

* {
overflow: visible !important;
position: relative;
}

I tried all suggestion given here, none of it worked.

Tried different value of Overflow, but didn't help.

Any suggestions? Please help

Firefox Print Problem

Hi Everyone,

I have a problem like only title will be displayed in whole page and other content will going in next page.

This will be happen when I do print preview in FireFox 3.6.11.

Please help!

Thanks,
JC

Dear JC

I am having exactly this problem but only when the page contains a long table. FireFox insists on putting a page break before the start of the table, so I get the banner, a page break, and then the table starts. !!!!!

This page:
http://www.star.nesdis.noaa.gov/star/SatelliteLaunchSched.php

I don't know how to make it not break before the table.

Grrr.

LKB

YES!!!!

@ Another Fix for Firefox

* {
overflow: visible !important;
}
 

Worked perfect. now I can go to sleep!!!!!

Worked for me as well

Thanks rocker Smiling

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.

Extra page problem

There is one page left blank and then print of data is displayed. This thing is only happening in FireFox.

Yes

I am using Firefox 3 but it doesn't support overflow: visible; or overflow: none;

Printing in Firefox

Looks like the latest update to Firefox 3 corrected this issue? Is anyone still experiencing this problem?

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.

Another Fix for Firefox

* {
overflow: visible !important;
}

worked for me. Your post was really helpful. Thanks!

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

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

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

Netscape

apparently overflowY = "scroll" does not work in Netscape on firefox engine

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:
<style type="text/css">
#css-element { overflow: auto }
</style>
You can also set it via Javascript:
<script type="text/javascript">
object.style.overflowX = "auto";
</script>
Does this answer your question?

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

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.

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.

The content of this field is kept private and will not be shown publicly.
 

We use this trick question to try and prevent automated spam comments.