Grow your CSS skills. Land your dream job.

Flash and CSS: overlayed flash header breaks IE

  • # October 31, 2008 at 2:13 am

    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?

    # October 31, 2008 at 2:28 am

    well i would say that the method you are using is bad. I think the work around that you are trying to use makes sloppy code and I.E 7 isn’t going to let you get away with it. Do you not know how to change the code in the php files. it isn’t as hard as you might be thinking it is. Restore the files and remove the old image and replace it with the flash file. that is the right way of doing things and the site will be better for it.

    # October 31, 2008 at 4:41 am

    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.

    # October 31, 2008 at 10:56 am

    well without direct access to your code, there really isn’t any suggestions that I could offer you. Since you have other things that are messing with it and you are doing it the hokey pokey way. It all comes down to trial and error. I think it’s breaking your design in all the browsers. Your blue drop shadow effect doesn’t line up correctly. are you afraid to edit the php?

    # October 31, 2008 at 11:25 am

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".