We Rock Your Web in the Press!

Why when I print from Firefox is there a content overflow?

Home Forums Tech Apps and Software Why when I print from Firefox is there a content overflow?

Post a New Topic

This topic contains 28 replies, has 6 voices, and was last updated by  Alex Schenker 1 year, 2 months ago.

  • Author
    Posts
  • #10585

    Jim_45
    Member

    Why does print preview overflow content in Firefox?

  • #11713

    Alex Schenker
    Keymaster

    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.

  • #11030

    What is the CSS equivalent of this?

    Thanks, Brian B

    • #11031

      Alex Schenker
      Keymaster

      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.

  • #11034

    xman
    Participant

    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?

    • #11035

      Alex Schenker
      Keymaster

      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.

  • #11036

    Dynomike
    Member

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

    Thanks in advance!

    –Michael

  • #11037

    Guest
    Participant

    Hi there, I have tried using your code but it doesn’t seem to work? Do you put the script part in a function, and what do you call the function? Also, where do you put this “{ overflow-y : sOverflow }” in your css or html? I’m a little confused since it won’t work for me.

    Cheers Jade Francis

    • #11038

      Alex Schenker
      Keymaster

      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?

  • #11039

    Guest
    Participant

    Apparently overflowY = “scroll” does not work in Netscape on Firefox engine.

  • #11040

    Guest
    Participant

    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.

    -Geoff

    • #11045

      Alex Schenker
      Keymaster

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

  • #11046

    Guest
    Participant

    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

  • #11047

    Guest
    Participant

    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.

    • #11048

      Guest
      Participant

      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.

  • #11049

    Guest
    Participant

    <style type=”text/css” media=”print”> body { overflow-y : visible } </style> fixed the lack of printing pagination for me in Firefox 2.0.

  • #11050

    Guest
    Participant

    * {
    overflow: visible !important;
    }

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

  • #11051

    Guest
    Participant

    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.

  • #11052

    Guest
    Participant

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

  • #11053

    Guest
    Participant

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

  • #11054

    Guest
    Participant

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

  • #11055

    Guest
    Participant

    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.

  • #11056

    Guest
    Participant
    Another fix for Firefox
    * {
    overflow: visible !important;
    }
    Worked perfect. Now I can go to sleep!!!!!
    • #11057

      Guest
      Participant

      Thanks rocker :)

  • #11058

    Guest
    Participant

    Hi Everyone,

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

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

    Please help!

    Thanks,
    JC

    • #11059

      Guest
      Participant

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

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

      Grrr.

      LKB

  • #11060

    Guest
    Participant

    I have done paging and sorting using javascript for html table. However for print I want to print all pages, so I write the 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.

  • #11061

    Guest
    Participant

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

  • #11062

    Guest
    Participant

    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!

You must be logged in to reply to this topic.