Why, in ie, is the absolute positioned logo to the right?

This is my CSS code:

#header {
    width: 900px;
    margin-left: 0;
    position: relative;
    text-align: left;
    clear: left;
    float: left;
}
#logo {
    z-index:-1;
    position:absolute;
}

and the html...

<div style="text-align: center;">
    <div id="wrapper">
        <div id="header">
            <!--Logo-->
            <div id="logo"> <a href="http://projectstratos.com/" title="Home"><img src="logo-transparent.png" border="0"></a>
            </div>
            <!--End Logo-->
        </div>
    </div>
</div>

The logo needs to stay absolute and under my content. In firefox it looks great but in ie the logo is to the right instead of the left. I am using the center div instead of the margin method of centering as in ie it doesn开发者_高级运维't work!

How can I move it to the left?

If it needs to be offset from the centre and you know the width of the logo then you can set the width, set left to 50%, and use a negative margin to center it. Then once centered you can add to the margin to get the offset you want from the centre.

Example:

#logo {
    position:absolute;
    left:50%;

    margin-left:-250px; /* This negative margin gets the logo in the centre */
    /* Adjust this value to get the offset you want. If you want to have it 100px to the left make it -350px, if you want it 50px to the right make it -200px */

    width:200px;
    z-index:-1;
}

Can you try top and left?

#logo {
    top: 5px;
    left: 20px;
    z-index:-1;
    position:absolute;
}