CSS layout issues only in IE7 positioning text over an image

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 I开发者_开发知识库E7 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;
}

You need to add left: 0 to #herotitle to make it work in IE7.

See in IE7: http://jsbin.com/avawo5

It's also worth pointing out that the way you're doing the entire page could be drastically simplified. If you'd like more details here, let me know.