Fix for Flash horizontal 1px pixel offset in Firefox 3.6

After updating to Firefox 3.6 on OSX I discovered many of the websites that use flash had the flash object offset by 1 pixel horizontally. Its a real pain hopefully it will be fixed soon. In the mean time I have discovered a temporary fix you can make to your HTML.

I researched the problem I found the bug that had been reported - Bug 550246. Still it may be some time off until it is fixed and released. The bug occurs when you have a flash element nested inside a div where you have the div aligned to the center using margin-left: auto; margin-right: auto. On OSX in Firefox the flash in the example below would be misaligned by 1px.
 

Example

 

I have a section of a screen shot here to demonstrate the problem where the flash is out by one pixel.



 

The Fix

The ideal fix for the problem is the Firefox developers fix the bug but in the mean time I have discovered a way you can hide the problem. As discussed in the bug it appears to be a error in calculation when applying center alignment. So my solution is to simply offset the div element by 1 pixel which allows the flash to be in the correct spot when the browser is maximized. As detailed in the bug report if you re-size the browser window and the viewport width goes from even to odd you will see the offset appear and disappear. I have made another screen shot to demonstrate the fix. In this example I have added a 1 pixel border to the div, I have made it red so you can see it other wise make it transparent on a real site.

Changes to make to the Code

So simple enough and it should work on any site until the bug (Bug 550246 - Centered DOM elements shift 1 pixel depending on EVEN or ODD browser width) is fixed. I think it worth while doing even though it only works when the with of the browser in pixels is an even number as it could be expected you have your browser set to use the maximum with of your screen which is an even number.

Hope this helps