X
Tap here to go to the mobile version of the site.

Support Forum

What makes Firefox print different parts of a web page (eg. kristiina.korpela-art.fi/en) on separate pages, while other browsers print continously?

Posted

I've learned from the support questions that Firefox has a bug / bugs in printing, but I didn't understand what is the crucial html code that Firefox does not treat correctly. Maybe I could go around the problem by adding or changing something in the style code created by the web site builder used by my domain provider?

I'm using Firefox Quantum 58.0.2 on Windows 10 on a laptop.

The web site builder always creates three parts - "header", "content" and "footer" - each of which Firefox prints on a separate page. Only one print-page-full of the "content" is printed even though the contents is longer. If all three parts fit on a single page, Firefox prints them correctly: http://www.kristiina.korpela-art.fi/Yhteystiedot

I've learned from the support questions that Firefox has a bug / bugs in printing, but I didn't understand what is the crucial html code that Firefox does not treat correctly. Maybe I could go around the problem by adding or changing something in the style code created by the web site builder used by my domain provider? I'm using Firefox Quantum 58.0.2 on Windows 10 on a laptop. The web site builder always creates three parts - "header", "content" and "footer" - each of which Firefox prints on a separate page. Only one print-page-full of the "content" is printed even though the contents is longer. If all three parts fit on a single page, Firefox prints them correctly: http://www.kristiina.korpela-art.fi/Yhteystiedot

Chosen solution

This is the problem:

.container-content-inner {
	display: inline-block;
	width: 100%;
}

Firefox keeps inline-block elements together, which is why the element moves to the next page. Unfortunately, Firefox also won't insert a page break into an inline-block element.

That all makes sense for blocks of a few lines, but obviously not for blocks that are thousands of pixels tall. Of course, I don't know why your site template uses that style rule in the first place.

To work around this issue without having to modify how your site template works, you can add this custom CSS somewhere:

@media print {
  .container-content-inner {
    display: block !important;
  }
}
Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 28.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

More Information

Pkshadow 1069 solutions 14836 answers

Helpful Reply

Hi, yes there can be print issues. I would suggest 1st cleaning up your code errors then check if will print. HTML - https://validator.w3.org/check?uri=http%3A%2F%2Fwww.kristiina.korpela-art.fi%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

CSS - https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.kristiina.korpela-art.fi%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

Firefox is a little stricter on code than other browsers.

W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. W3C.org Who make the rules for web code. HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

Can check this out : http://kb.mozillazine.org/Problems_printing_web_pages

Please let us know if this solved your issue or if need further assistance.

Hi, yes there can be print issues. I would suggest 1st cleaning up your code errors then check if will print. HTML - https://validator.w3.org/check?uri=http%3A%2F%2Fwww.kristiina.korpela-art.fi%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 CSS - https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.kristiina.korpela-art.fi%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en Firefox is a little stricter on code than other browsers. W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. W3C.org Who make the rules for web code. HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/ Can check this out : http://kb.mozillazine.org/Problems_printing_web_pages Please let us know if this solved your issue or if need further assistance.
Pkshadow 1069 solutions 14836 answers

Oh, the errors are from your main page, that is all I checked.

Oh, the errors are from your main page, that is all I checked.

Question owner

Good point - it makes sense to validate the web page code as the first step in any troubleshooting. The syntactically corrected code is at the address below, but it still prints on three separate pages e.g. in print preview:

http://www.kristiina.korpela-art.fi/test/

Is there a list of known html elements - values - combinations which cause Firefox print in an unintended way (be it error or not)? Do people have experience that "if Firefox prints on separate pages when other browsers print continuously, check if there is a DIV / I-Frame / Table that ... "?

And yes, it still is both necessary and important to be able print on PDF and even on paper.

Good point - it makes sense to validate the web page code as the first step in any troubleshooting. The syntactically corrected code is at the address below, but it still prints on three separate pages e.g. in print preview: http://www.kristiina.korpela-art.fi/test/ Is there a list of known html elements - values - combinations which cause Firefox print in an unintended way (be it error or not)? Do people have experience that "if Firefox prints on separate pages when other browsers print continuously, check if there is a DIV / I-Frame / Table that ... "? And yes, it still is both necessary and important to be able print on PDF and even on paper.
Pkshadow 1069 solutions 14836 answers

Hi, hope found those URL's useful and sorry still having issues. Please try :

As no printer is listed I can not check for you if there are updates for software nor if there are Firmware flashes. Please check.

Please let us know if this solved your issue or if need further assistance.

Hi, hope found those URL's useful and sorry still having issues. Please try : *https://support.mozilla.org/en-US/kb/fix-printing-problems-firefox *http://kb.mozillazine.org/Problems_printing_web_pages As no printer is listed I can not check for you if there are updates for software nor if there are Firmware flashes. Please check. Please let us know if this solved your issue or if need further assistance.
jscher2000
  • Top 10 Contributor
7770 solutions 63297 answers

Chosen Solution

This is the problem:

.container-content-inner {
	display: inline-block;
	width: 100%;
}

Firefox keeps inline-block elements together, which is why the element moves to the next page. Unfortunately, Firefox also won't insert a page break into an inline-block element.

That all makes sense for blocks of a few lines, but obviously not for blocks that are thousands of pixels tall. Of course, I don't know why your site template uses that style rule in the first place.

To work around this issue without having to modify how your site template works, you can add this custom CSS somewhere:

@media print {
  .container-content-inner {
    display: block !important;
  }
}
This is the problem: <pre>.container-content-inner { '''display: inline-block;''' width: 100%; } </pre> Firefox keeps inline-block elements together, which is why the element moves to the next page. Unfortunately, Firefox also won't insert a page break into an inline-block element. That all makes sense for blocks of a few lines, but obviously not for blocks that are thousands of pixels tall. Of course, I don't know why your site template uses that style rule in the first place. To work around this issue without having to modify how your site template works, you can add this custom CSS somewhere: <pre>@media print { .container-content-inner { display: block !important; } } </pre>

Question owner

Thanks a lot! That works - after removing the "inline-" Firefox printview flows continuously, like Chrome and IE as well.

Now I just need to convince the platform's support staff to modify their CSS ...

Thanks a lot! That works - after removing the "inline-" Firefox printview flows continuously, like Chrome and IE as well. Now I just need to convince the platform's support staff to modify their CSS ...