Firefox 3.6 adds 1 pixel spacing around Adobe Flash Movies (at least on Mac OSX)

I’ll say right now, I don’t currently have a solution to this problem but if you do, please let me know as I need a solution for a current project!

I was part-way through developing a website at work for a client yesterday when I got a notification from FireFox telling me version 3.6 was now available. So, being the sensible techie type I dropped what I was doing and upgraded, what could be the problem with that eh?

Well, the problem is that I immediately noticed that an Adobe Flash movie which was being embedded in the web page I was working on now had a mysterious 1 pixel spacing around it…not good. I assumed that FireFox 3.6 was perhaps adhering more strictly to some CSS standards or had slightly different inheritance so I duly set about amending all the usual properties, forcing border, outline, margin and even padding to 0 but no improvement. I then tried some slightly less usual attempts at fixes such as floating left, right or none, position relative and so on, again, no improvement. hmmm.

So, I turned to Google and found that a lot of people have found the same problem. Someone suggested “outline:none” should be added to the Flash movie object but this didn’t help me and didn’t seem to help most other people either.

There are various claims that the problem exists only on the Mac OSX version of FireFox 3.6 which from my limited testing at work appears to be the case but I couldn’t say for sure.

For reference, my test case consists a Flash Movie (which is actually a YouTube video) inserted using the Flash Satay method (which is therefore an object) sitting directly inside a div which is floated (left) with fluid height and fixed width:

<div>
 <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/lBO3hBSga6k&amp;hl=en_GB&amp;fs=1&amp;"&gt;
 <param name="movie" value="http://www.youtube.com/v/lBO3hBSga6k&amp;hl=en_GB&amp;fs=1&amp;" />

 <img src="/images/listing_to_details_page/details_thumb/" alt="" />
 </object>
 <h3>
 <a href="/item/14">
 Now Showing: Kick Ass
 </a>
 </h3>
</div>

If anyone has any further experience or suggestions for fixes, i’d be very glad to hear them!

UPDATE: I have added a bug report to Mozilla’s Bugzilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=553177 please confirm the bug and add any further information you feel necessary if you are experiencing the same problem.