IE margins 1px out?

programming web dev
1

Does anyone know why IE 6 and 7 is displaying things with margin: 0 auto 0 auto incorrectly?

heres and example of the basic xhtml im using


<body id="home">

        <div id="header" class="container">
            
            <a href="#">test</a>
            
        </div>

</body>

then in my css im using


html, body {[INDENT]width: 100%;
height: 100%;
background: #e5e5e5 url('images/bg_body_y_tile.gif') top center repeat-y;
[/INDENT]}
.container {[INDENT]width: 1000px;
margin: 0 auto 0 auto;
[/INDENT]}
#header a {[INDENT]display: block
width: 300px;
height: 50px;
background-color: #000000;
[/INDENT]}

the bg_body_y_tile.gif is a 1100 px wide vertically tiling image, the content area is 1000px wide (as you can see by the width i specified in the .container rule)

what is odd is that in Firefox, elements such as the <a> tag in my example in the containers line up correctly with my centered, tiled background image. but in IE 6 and 7, the elements are 1px to the left, so if they have backgrounds defined it looks like they ‘stick out’ over my background image.

hope that makes sense to peoples? anyone know whats going on?