695746 - Font rendered slightly too large causing page not to fit into assigned space

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[knut]

User Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en; rv:1.9.0.19) Gecko/2011091218 Camino/2.0.9 (like Firefox/3.0.19)
Build ID: 2011091218

Steps to reproduce:

Opened this web page in Safari, Chrome and IE - they all render it properly with the two links at the bottom showing.
http://www.pranicenergyhealing.ca/meditation_fr.php


Actual results:

When I open that same web page in Firefox, the font of the text on that page is rendered slightly too large so that the text runs down further on the page and the two links at the bottom of the page are not visible


Expected results:

The font should render at the same size with Firefox than for the other browsers.

This issue has been discussed on forums with not very satidfactory work-arounds being proposed but I couldn't find this issue when I searched the Mozilla bug database.
Problem also happens on Camino which is Mozilla based.

Comment 1

[Jonathan Kew [:jfkthame]]

The page tries to display several paragraphs of text in a <div> with a fixed width and height. This is inherently non-portable and poor web design; it assumes one specific set of font metrics, otherwise the text won't fit as intended. Font metrics vary between browsers, operating systems, and even individual user configurations, so the result is very fragile.

In brief testing, I see similar "problems" displaying that page in Chrome on Windows; in Firefox on Linux (where I don't happen to have "Trebuchet MS" installed) it's even worse; and in IE on Windows the results vary greatly depending on the browser mode (IE7/IE8/IE9/IE9 "compatibility").

Comment 2

[knut]

I don't see how this problem can be classified as "invalid"
Sure - one can claim it's "poor" web design but it's still a valid way to design a web page.
W3C Validation doesn't bring it up as an issue and all the browsers I tried except the latest Mozilla based ones, render this page properly.
That not only includes the ones I already listed initially, but also IE9 on Windows where the page renders properly the way it is.
 I also found that with an older version of the Mozilla rendering engine, the page displays properly. I had SeaMonkey 1.1.1 on my Mac which lists this as the base rendering engine:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.2) Gecko/20070221 SeaMonkey/1.1.1
...and that displays the page properly.

The latest version of SeaMonkey, 2.4.1 however does not, so it's pretty obvious that a change was made between the older built and this one to create this problem.
Build identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:7.0.1) Gecko/20110928 Firefox/7.0.1 SeaMonkey/2.4.1

Are Mozilla based browsers now moving in the same direction as MS IE did for years - where web pages have to be specifically designed for that browser?
Would be nice to know if that is the strategy.