So this layout is only causing problems in IE7. I’m trying to do a

Question

0

Asked: May 22, 20262026-05-22T01:28:23+00:00 2026-05-22T01:28:23+00:00

So this layout is only causing problems in IE7. I’m trying to do a

0

So this layout is only causing problems in IE7. I’m trying to do a centered layout with 2 images around a video embed and have some text over one of the images. IE7 throws the text way over to the right. I’m not sure if IE7 is not handling the negative margin method for centering or some other issue.

I know it’s not the overflow bug, because I took out the overflow-x: hidden; and got the same behavior. I’d be extremely grateful if anyone has any insight or solutions, thanks in advance!

Here’s the relevant code:

<div id="hero">
    <img src="images/heroleft.jpg" alt="" />
    <p id="herotitle">WE ARE A VIDEO PRODUCTION<br />TEAM</p>
    <iframe src="http://player.vimeo.com/video/22903076?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="622" height="350" frameBorder='0' border='0' style="border:0"></iframe>
    <img src="images/herofaderight.jpg" alt="" />
</div>

CSS:

body{ 
    margin: 0;
    padding: 0;
    color: #fff568;
    overflow-x: hidden; 
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#hero{
    left: 50%;
    width: 1160px;
    margin-left: -580px;
    height: 350px;
    position: absolute;
}

img,iframe{
    float: left;
}

p#herotitle{
    font-size: 36px;line-height: 38px;font-weight: 600;
    padding-left: 130px;
    position: absolute;
    margin-top: 36px;
}