Font metrics, anti-aliasing technologies, and the hardware graphics acceleration setting may affect the size of fonts and other aspects of page layout. To some extent, these will vary between operating systems. Developers who shoot for pixel accuracy may get burned.

As a workaround, if you use a custom zoom factor in the Print Preview on your Linux system, can you get the result you want?

Is it a public page we could test? If so, please post the URL.

Hello jscher2000,

I have tried various paper and zoom sizes but it doesn't change the layout. Unfortunately its not a public webpage - its a voucher printout for local tours, run by the council. I have attached 2 screenshots, both from my Ubuntu computer - the webpage shot shows how it should be (and how it prints from firefox in Windows and Chromium in Ubuntu), and the print preview shot shows how it does actually print in Ubuntu.

Wow, there appear to be several things going wrong there.

If I assume that the boxes are laid out using a table, the print display looks as though the rows have been switched from the default table-row display to a block display. But I can't think of a logical reason for the site to do that, or why you would get a problem result only in Linux (block display for table rows should create the same problem on Windows).

Or maybe some of the content is being floated to the left? That could explain why a lower portion of the page slides up over a higher part. But again, why different on Linux?

If you compare add-ons between the two systems, are they the same? What is the green printer icon on the Add-ons bar?

Hi there,

It appears to be wrapping the blocks onto the following line. I have been able to get the html from the page and save it offline and it works the same - comes up fine in the webpage but the print preview option the boxes are wrapped onto the following lines.

The green icon in the bottom left is Printfriendly - I tried installing a few different print extensions before resorting to the Mozilla support pages to solve this problem.

You can view this file at http://pvv.ath.cx:9889/temp/voucherhtml.html I am not very good with HTML so there might be something in the file that is causing this.

Thanks for your time with this.

If DIVs are used and not a TABLE layout then clearing DIVs with a clear:both CSS rule may be missing causing all cells to be layout next to each other until wrapping occurs because it doesn't fit.
That would explain that the next row start immediately after the last one of the previous row and some content appears on top of other content.

Let's try widening the containers whose contents are wrapping. As an experiment, let's widen them from 670 pixels to 675 pixels and see whether that helps.

When viewing the page, open the Web Console

Tools > Web Developer > Web Console or Ctrl+Shift+k)

Paste the following line of code next to the caret (>) and press Enter to run it. You should notice the the borders move to the right by 5 pixels:

var dv = document.defaultView; var d=document.getElementsByTagName("div"); for (var i=0; i<d.length; i++) if (dv.getComputedStyle(d[i], null).getPropertyValue("width")=="670px") d[i].style.width = "675px";

If you preview, does the layout work?

Yes that worked perfectly. By trial and error I found that it worked at 674px as well, but anything below this it started to wrap the blocks. Now as we have found a workaround - can this be implemented automatically at the browser end as a fix? Unfortunately the website is not mine and there is no chance to get the actual generated HTML changed.

You could automate it using the Greasemonkey extension and a userscript.

• https://addons.mozilla.org/firefox/addon/greasemonkey/

After installing Greasemonkey, a monkey icon should appear on the Add-on Bar. When you are on the page you want to change, click its tiny drop-down menu and choose New User Script. Edit the URL so that it will match all your vouchers and add an asterisk (*) to the end. (That option is also available on the Tools menu; Alt+t to display if necessary.)

You can choose any text editor as your code editor. Then add the above line of code below the automatically inserted metadata block. It should be applied automatically when you reload the page.

Any luck?

jscher2000, that worked a treat! With the Greasemonkey script entered and running it now prints fine. Really appreciate all of your help on this.