Ubuntu Firefox renders differently

Question

Firefox on Ubuntu seems to render some HTML considerably differently compared to other browsers. In particular some fonts/styles on Ubuntu are becoming much larger and columns of text which rely on equal numbers of line breaks to keep them aligned are no longer aligned on Ubuntu Firefox.

I have have been given some HTML which was made in iWeb and it displays correctly on all major browsers except for Firefox on Ubuntu. (Firefox on Windows works fine)

I am running Firefox 3.0.12 on Ubuntu and I have the Ubuntu Firefox Modifications add-on turned off.

What could be causing this problematic discrepancy with Firefox on Ubuntu?

Update: I've discovered that a copy of the HTML stored locally on my own machine actually renders the columns correctly aligned but when viewed online it becomes unaligned.

I've tried installing the Microsoft fonts package but that hasn't helped.

Update 2: With the columns issue, there seems to be at least two problems. One is that iWeb broke one of the columns into two blocks of code and placed it around the code for the other column. Once I made sure each column was created by a contiguous block of code and removed some now redundant divs, the alignment was a lot better on Ubuntu but not perfect. These changes didn't seem to affect the rendering on other browsers either.

Digging around with Firebug, it seems that I can fix the problem on Ubuntu completely by removing the font-size attributes for all relevant text. However this then breaks the alignment on all the other browsers - now I'm back to square one again.

(And yeah, I know that the way the HTML is designed is kinda bad practice, but I've just been given the code so I don't really have much choice)

Answer 1

Are you using the same Version on Windows?

You can try to start FF in safe mode or create another user profile.

Answer 2

It is most likely a matter of fonts. If the browser doesn't find the font contained in the stylesheets, it will replace it with a font it sees suitable.

Unfortunately, Ubuntu doesn't come with a lot of fonts. There is a package called msttcorefonts that contains multiple Microsoft fonts. You can install it using:

sudo apt-get install msttcorefonts

However, if you users don't have the particular fonts you need, they will see the page different.

I would recommend you either don't make your design too dependent on the font. If, however, this is a necessity, consider other ways of rendering the text (like using Javascript, if the it is a title, for example).

Answer 3

A nice one.
Lucky for you the solution should be simple: Install the MS fonts on your machine...

Explained here for example

Answer 4

Maybe it's because fonts are not dealt with the same way on Windows and on Linux ? Or maybe the fonts you are using on windows are not installed or the Ubuntu machine ?

That "problem" doesn't seem to be limited to Firefox : Googling a bit, I found posts that said the same with OpenOffice, for instance.

In jaunty there is package called ttf-mscorefonts-installer that should help about that : it installs fonts like :

• Andale Mono
• Arial Black
• Arial (Gras, Italique, Italique Gras)
• Comic Sans MS (Gras)
• Courier New (Gras, Italique, Italique Gras)
• Georgia (Gras, Italique, Italique Gras)
• Impact
• Times New Roman (Gras, Italique, Italique Gras)
• Trebuchet (Gras, Italique, Italique Gras)
• Verdana (Gras, Italique, Italique Gras)
• Webdings

(sorry, my system is in french ; "gras" means "bold" ; you probably guessed that "italique" means "italic" ^^ )

As a sidenote, this :

In particular some fonts/styles on Ubuntu are becoming much larger and columns of text which rely on equal numbers of line breaks to keep them aligned are no longer aligned on Ubuntu Firefox.

Is definitly not a good practice.

You are encountering a problem with fonts that are not installed (probably) ; but what about a user that sets his browser to :

• either zoom the fonts for a particular website
• or define a minimal font size ?

That can be done in almost any browser -- not only firefox nor Linux...

And some people do that -- I do : my eyes are not perfect (not that bad either), and I find too small fonts sometimes hard to read, so I generally set a minimal font size in Firefox ; and, yes, it destroys design on some websites :-(

And if I do that, I guess I'm not the only one : there are more and more quite old people on the Internet, that have troubles with their eyes, for example...
For instance, my grand-father recently got a computer ; I had to set his screen resolution to something like 1024x780 on his 19p LCD screen, and maximal font size in windows, so that he could read... And yeah, that makes everyone who uses his computer almost cry ^^ But it's the only way he could read...

Answer 5

I have the MS Fonts installed, but still Firefox 3.0.13 in Ubuntu jaunty Jackalope displays many sites in a different way. And in the case of a Joomla! website of mine: http://imagewize.net the wrong way. The top menu search box and contac us button overlap each other. In Windows Firefox 3.0 and 3.5 there are no issues. Nor are there issues in IE6 or Safari on Windows. Very strange indeed.

Answer 6

I was having the same problem rendering a text input element (using jQuery UI autocomplete) within a table cell using Firefox in Ubuntu. The table was rendering flawlessly in IE 7&8, Chrome, Safari, Firefox 3.6, but not in Firefox on Ubuntu! Arg.

I was able to set an inline style="font-size: 11px" for the text input element to fix the problem. Although it shrunk the font-size from an 12px to 11px (hardly noticeable), I was able to get a table cell that wouldn't adjust in Firefox on Ubuntu. Still renders on the above browsers!

Much thanks to Pascel MARTIN for the tips!