I am using swfobject to display a small, flash based logo in the upper right hand corner of a masthead. The masthead has a background image configured in a main or parent header div. The logo is in it's own child div with float right and displays properly in Firefox. In IE6 the logo displays, but has a duplicated background image from the parent div. I've tried specifying background-image: none for the logo div, moving the script inside and outside the logo div and header div and various other things, but I am not having any luck. Strangely enough, the background height is the same as the header height even though the logo is only about 25% of that. My code validates at W3C using both the XHTML and CSS checkers. I also upgraded to the latest SWFObject v1.5.
Is there something you guys know of that I can try to solve this? Maybe a way to tell SWFObject not to consider inheritance?
Solved this one finally... Apparently there is an internally used element named "header" that the CSS in my page was overridding. This caused the swfobject div to be skewed in position and have the background duplicated.
In short, if you use SWFObject, don't call any of your elements "header".
I still don't understand how it worked in FF but not IE... Oh well...