Issue in print on FF with absolute positioning

Asked 6/12, 2011 at 10:9 Answered 16/6, 2020 at 13:37

Solved html firefox printing css css-position

I am facing some issue in printing a form created using absolute positioning in FF. I am printing on A4 sheet. The page comes fine if its single paged form, but when i have to print multi page form the only first page is printed and other elements that have to come on second page overwrites each other in a single line on the next page. Its quite weird the same is working fine on IE

NOTE I am unable to share the html as it includes a lot of css and quite complex and big HTML pages.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@-moz-document url-prefix() {div{position:relative} }
@media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}

</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>

Pyelonephritis answered 6/12, 2011 at 10:9 Comment(2)

Cant we do anything like manipulating the html file at back end (servers side) and provide a PDF as output. I tried this but facing challenge in creating multiple pages in PDF too for position:absolute – Pyelonephritis 13/12, 2011 at 10:4

make a style for "print" and set all div position to relative – Thwart 22/8, 2016 at 6:44

There is a thread where the topic was already discussed: Firefox printing only 1st page

However, the problem could be in the css. As explained here http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/

If you have an

overflow: hidden;

in your css, change it to

overflow:visible;

and then it should work.

Polyvinyl answered 6/12, 2011 at 10:21 Comment(1)

my page doesnt have any overflow : hidden; in case i had something of that kind too i wont mind that portion of page to not be displayed on print out but other stuff should get printed.... – Pyelonephritis 6/12, 2011 at 10:51

There's a long standing issue with Firefox and printing absolute positioned elements as mentioned by Daniele B.

Can you redo the HTML+CSS to use relative positioning?

In the CSS add some page-break stuff (http://davidwalsh.name/css-page-breaks). That should make it easier to style the block elements so they flow in each 'page' and align things correctly when @media print.

Meyer answered 20/12, 2011 at 4:56 Comment(2)

relative positioning also has issues... tried it too,.. as soon as i provide left and top on elements i get print issues – Pyelonephritis 20/12, 2011 at 8:40

the link doesnt helps in case of absolute positioning... :S – Pyelonephritis 20/12, 2011 at 8:49

If it is possible, set the height of the div elements. This will at least force visibility onto two pages. However, it does not deal with overlapping divs, and there still may a problem of visibility of the div content.

Here is my revision (some visibility borders and coloring was added, and the width may or may not prove useful):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    @-moz-document url-prefix() {
        div{
            position:relative;
            background-color: #dddddd;
            border: 1px solid #999999;
            width: 20%;
        } 
    }

    @media print { 
        marquee { 
            -moz-binding: none; 
        } 
        body{
            overflow:visible !important;
        }
    }
    #a{
        position:absolute;
        top:50px;
        left:70px;
        height: 1000px;
    }
    #b{
        position:absolute;
        top:1050px;
        left:170px;
        height: 600px;
    }
    #c{
        position:absolute;
        top:1550px;
        left:470px;
        height: 500px;
    }
    #d{
        position:absolute;
        top:1650px;
        left:270px;
        height: 100px;
    }

</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>

Dewdrop answered 20/12, 2011 at 5:8 Comment(2)

I only use "Print Preview" in FF; I don't have a printer attached to my computer. PP shows that some of the text dissappears . . . not sure why. – Dewdrop 20/12, 2011 at 17:43

thats what complete text is not getting in print preview as well – Pyelonephritis 21/12, 2011 at 10:52

change your position:absolute to position:relative. you can target firefox only in your print stylesheet using: @-moz-document url-prefix() {div{position:relative} }

Jasen answered 13/12, 2011 at 10:14 Comment(7)

still it will give issue the top and left been set will restructure the page... and as soon as we have top and left on page it wont print correctly and will just give 1 page – Pyelonephritis 13/12, 2011 at 11:10

though i was conviced it wont work still i gave it a try and it didnt worked – Pyelonephritis 13/12, 2011 at 11:12

ok. man this is like a needle in a haystack with no code, but try this: @media print { marquee { -moz-binding: none; } body{overflow:visible !important;} } – Jasen 13/12, 2011 at 11:40

the solution been provided didnt helped.. i have edited the question and have provided a sample code... – Pyelonephritis 13/12, 2011 at 12:35

my bad man. ok, well add the ids so they override in specificy @-moz-document url-prefix() {div#,div#b,div#c,div#d{position:relative} } im digging around in firefox here: jar:file:///C:/Program Files %28x86%29/Mozilla Firefox/omni.jar!/chrome/toolkit/res/ – Jasen 13/12, 2011 at 12:53

let us continue this discussion in chat – Pyelonephritis 13/12, 2011 at 13:3

didnt helped... didnt get the jar part?? what are u trying to do? – Pyelonephritis 13/12, 2011 at 13:3

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue; 
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red; 
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple; 
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green; 
}

</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>

Porism answered 28/12, 2016 at 9:3 Comment(0)

What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029

Steamboat answered 16/6, 2020 at 13:37 Comment(0)

Recommended topics

Hot tags