Flash and CSS: overlayed flash header breaks IE

[violinflu]

Greetings, I hope someone out there can take a look at this and offer some advice.

A Far Cry Chamber Orchestra

This is a wordpress-based site, and I am attempting to temporarily replace the header graphic with a swf. The wordpress theme I am using has a mechanism for dynamically generating the header image, so I decided not to wade through a lot of php and replace the image directly. I am instead attempting to place the swf in my home page main content area, and then "shove" it up so it covers the header image using CSS.

It was not too difficult to get working within Firefox and Chrome, but my CSS absolutely destroys IE7:

Code:

.wrapper {
position: relative;
margin: 0 auto;
text-align: left;
width: 822 px;
}

embed {
position: absolute;
top: -233px;
left: -22px;
margin: 0px;
padding: 0px;
}

The CSS file is layoutseason2.css, and the swf is afcbanner.swf

What could be causing the IE hissy fit?

[violinflu]

Thanks – I revisited the header generator php angle and I think you’re right. I still need the generator to run – it completes some design elements – but I am now trying to put the swf directly on top of the generated jpg, from within header.php.

I’ve almost got it:

A Far Cry

As you can see, the swf if pushed to the left. The last remaining challenge is to get the swf perfectly horizonatally centered, which will mostly cover the generated jpg.

Here is the CSS I’ve got:

Code:

#wrapper {
border: 0;
position: absolute;
margin: 0px auto;
}

object {

}

And the PHP / html:

Code:

Any ideas how I can get this thing centered in a way that will work in FF, IE, etc etc?

Thanks, cybershot, for your help.

[violinflu]

Hokey Pokey is right…

Well, now I’ve got it working correctly in Firefox and Chrome, and IE is at least centering the swf (although it is pushing the rest of the page content down)

The CSS, based on this method:

Code:

body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}

#wrapper {
position: relative;
margin: 0 auto;
text-align: left;
width: 822px;
}

object {
position: absolute;
}

I have been tinkering with the php and css for some hours, and will probably continue, but at a slower rate, now that it looks at least somewhat decent. I don’t think the blue drop-shadow misalignment has anything to do with this CSS adventure – I’ve noticed it before, and it has always lined up correctly in other browsers. The real problem is that I’m stretching this poor wordpress theme beyond where it was intended to go. If anyone has any ideas for perfecting the IE flash banner, or any explanation as to why it might not be working correctly, please share!

the website:
A Far Cry

[Author]

Posts