Flash Overlapping HTML. CSS Problem In IE??

Question

HELP, this is a very unique problem and I can't for the life of me figure it out.

My flash content is overlapping the HTML above it.

This only happens if I've just launched IE after being restarted and goes away once I refresh the page. I even added a jQuery $(document).ready function that sets a margin between the html and the flash content to add 1px of space when the page is loaded. It's so hard to figure out, because once I refresh the page, it goes away.

Any input GREATLY appreciated.

Here is the site.

http://www.californiaremodels.com

(This only happens in IE)

here is a screen shot of the problem.

########### SOLVED ###################### SOLVED

I set the flash output as a javascript var (actually json_encoded PHP output) and on document load inserted the object into the "flashContent" div with the jQuery.(document).ready event.

Thank you to Andy Shellam!!

Answer 1

It may be due to the fact that you're floating that DIV that holds the flash content. It shouldn't matter, but sometimes IE gets hinky about such things. Try taking off the float and see if that cures the problem. If it does, create a non-floating workaround.

Answer 2

looks like it is the -4px of margin top you have that is creating the problem

Answer 3

Have you tried loading your flash content using jQuery? I.e. set your div width/height in your HTML with a "this requires javascript/flash" placeholder, then have jQuery load the OBJECT into the div on page load. This way cures IE7's annoying "click here to activate this control" issue - may be a similar issue.