Linux Firefox Spaces Things Differently

Question

I am having trouble with Linux spacing of things, in multiple APIs. Thoughts?

On the linked page below, there is a button with a magnifying glass on the map - in the upper left corner - directly to the right of the Home Map button.

In Firefox 3 on Linux, this button appears to be on top of the Home Map button. On a Mac or Windows machine, the buttons do not overlap. I declare a GSize(x,y) to position the button (from the GMaps API).

http://www.trailbehind.com/node/1114131/

Likewise, on the same page, if you hover over the brown drop-down menu under the logo, and click the Login or Register link, the Submit and Cancel buttons are spaced further up in Linux than on Windows or Mac. For positioning these buttons, I create YUI Buttons on a YUI Panel.

Answer 1

Could be due to fonts, with linux doing a fallback that's somehow messing up size calculations. Could also be due to differences in the timing of page reflow, where the button hasn't sized itself appropriately by the time you try to fetch its size.

Answer 2

The problem is that you're assuming the size of particular characters in a particular font; this assumption will generally be false and you shouldn't do so. Instead measure the amount of space that the element actually takes up - this is pretty trivial in Javascript, or set the elements up such that they browser will lay them out not to overlap to begin with.

This is not Linux-specific, but could happen anywhere if the browser decides to substitute a different font (which is quite possible) or override your choice of font size, either of which it could legitimately do for readability, user configurable options, etc.