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 affected). 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.
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.