All geek questions in one place

The problem is printing on FF with absolute positioning

I have to deal with some problem when printing form created using absolute positioning in FF. I am printing on sheet A4. A page is great if its a single paged form, but when I have to print a multi-page form, only the first page prints, and the other elements that should go on the second page rewrite each other on the same line on the next page. Its pretty weird the same thing works on IE

NOTE I cannot share html as it includes a lot of css and rather complex and large 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>
+6
source share
5 answers

There is a topic in which the topic has already been discussed: Printing on only 1 page

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

if you have

 overflow: hidden;

in your css, change it to

 overflow:visible;

and then it should work.

+1
source

There is a long-standing issue with Firefox and printing absolutely positioned elements, as mentioned by Daniele B.

Is it possible to redo HTML + CSS to use relative positioning?

In CSS, add page break material ( http://davidwalsh.name/css-page-breaks ). This should facilitate the style of the block elements so that they move on each page and properly align things when printing @media .

+1
source

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

0
source

If possible, set the height of the div elements. This will at least result in two page visibility. However, this does not apply to overlapping div s, and there may still be a problem of visibility of the contents of the div .

Here is my revision (some borders of visibility and coloring have been added, and width may be useful or may not be 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>
0
source 

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

Source: https://habr.com/ru/post/903180/

More articles:


All Articles