Random Bizarre Firefox / CSS / Flash Bug

I just spent the last several days troubleshooting this bug and since I couldn't find any information anywhere on the web for this obscure problem, I'm posting it here.

For a new site I'm building I have randomly loading promo buttons which are created in Flash. Since they're random and will appear on multiple pages, they need to be transparent. Nothing out of the ordinary, but when I put the page together I noticed a very peculiar error...

ONLY in Firefox 1.5 on a PC (2.0 was fine, Mac was fine) and ONLY when the swf had it's wmode property set to transparent, the swf would load but then be inoperable. No rollover animation or button click events would fire. It just sat there doing nothing on the page.

I tried everything to make it work... multiple embed methods, different flash publishing settings, etc. Nothing seemed to help until a colleague steered me, oddly enough, toward the CSS for my page.

My Flash promos where in a floated div tag for the left column of my page. The container element for the page columns contained a few styles, one of which was "overflow: auto;". This was being used to help clear the floats. A simple switch to "overflow: hidden;" magically solved the problem.

I’m still not 100% as to why this problem occurred. I was careful with my widths and paddings to make sure there weren’t any actual overflow problems but for some reason older versions of Firefox were just not happy with it. So there it is… if anyone else ever encounters this very odd random bug, check the CSS overflow property for the solution.