Flash/SWF Object Affecting Element Padding

Question

I've been racking my brain trying to figure this one out as it's been a problem on the past few sites I've worked on (though they haven't gone live yet) and rather than trying to rig up a solution I'd like to try and discover the root of the problem.

Here's the site in question: (url removed)

Basically I coded this homepage out as plain HTML and then inserted Javascript and Flash elements as I completed them over time. When I got to adding the Flash (using SWF Object), I noticed that it had pushed the elements beneath it down roughly 5px, and only in Firefox and Safari (Internet Explorer, oddly enough, isn't effected). Turning off Flash or disabling Javascript, which also turns the Flash off, removes this extra padding.

Can someone enlighten me as to what is causing this issue? I don't notice any major JS or CSS errors (other than a few hacks for IE), so I'm stumped.

Answer 1

Try removing the whitespace between the DIVs on the page, and try putting the swf object into its own DIV. That way you can control what the page looks like without loading the swf, and it won't affect the other elements when it loads.

Answer 2

Try explicitly setting the margin and padding of the object element to 0px

You're using SWFObject 2.0, which does things slightly differently than the SWFObject of old. The old one would plant the embed INSIDE of a target div. The new one seems to actually replace the entire target DIV with an object tag.

Something I don't like, which is why I still use the old SWFObject.