dan forys


Intermittent 1px gap in Firefox 3

Posted on 2008-07-30 - Comments

My work has just pushed out an update, upgrading our users to Firefox 3. Naturally, we’ve been busy looking through our internally produced sites to check all is fine in the new version.

In 99% of cases, all our sites look the same in Firefox 3, apart from one notable exception. In this one case, there is a 1px gap between the left-hand margin (which is centred using "margin-left: auto") and the header image. Being the perfectionists we are, we don’t want a 1px white gap in our nice header.

Oddly, this 1px gap would come and go as the browser window is horizontally resized. This behaviour set alarm bells ringing that it's some kind of rounding error in the "auto" positioning vs the exact pixel dimensions of our centred container.

After a bit of searching, we found an entry in John Resig's blog (of JQuery fame), where he has stumbled upon the issue and developed a test case for the main browsers. Turns out that fixing it is a challenge, as all the browsers round the numbers differently. Problem is, there's no standard for how the browsers should round the pixels, so fixing it in one browser will almost certainly break it in another.

Ho hum, here’s hoping for a future standard.