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 meantime, 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 centre using margin-left: auto; margin-right: auto. On OSX in Firefox, the flash in the example below would be misaligned by 1px.
 

Example

 
<div style="width: 500px; margin-left: auto; margin-right: auto"
    <object width="500px" height="200px" type="application/x-shockwave-flash" data="gallery.swf" style="visibility: visible;"
       <param name="wmode" value="transparent"
       <param name="play" value="true"
       <param name="quality" value="high"
       <param name="loop" value="true"
       <param name="menu" value="false"
    object> 
<div> 

I have a section of a screenshot 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 meantime, I have discovered a way you can hide the problem. As discussed in the bug it appears to be an error in the calculation when applying centre 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 screenshot 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 otherwise make it transparent on a real site.




Changes to make to the Code

<div style="border-left: 1px solid transparent; width: 500px; margin-left: auto; margin-right: auto"
    <object width="500px" height="200px" type="application/x-shockwave-flash" data="gallery.swf" style="visibility: visible;"
       <param name="wmode" value="transparent"
       <param name="play" value="true"
       <param name="quality" value="high"
       <param name="loop" value="true"
       <param name="menu" value="false"
    object> 
<div> 

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 worthwhile 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