- This topic is empty.
-
AuthorPosts
-
October 31, 2008 at 2:13 am #23506violinfluMember
Greetings, I hope someone out there can take a look at this and offer some advice.
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?
October 31, 2008 at 4:41 am #50854violinfluMemberThanks – 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:
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.
October 31, 2008 at 11:25 am #50849violinfluMemberHokey 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.