Div 1px out in IE7

ziycon

It works fine in FF 3 and in IE8 but in IE7 the site_wrapper div is over to the left by 1px and its noticable due to the colors of the site. Can anyone help?
Page:

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<title>test</title>

<link type="text/css" rel="stylesheet" href="conf/styles/default.css">
 
</head>

<body>

<div id="external_container">

    <div id="internal_container">

        <div id="site_wrapper">

            &nbsp;

        </div>

    </div>

</div>

</body>

</html>

CSS:

Expand|Select|Wrap|Line Numbers

 body {

    margin: 0px auto;

    padding: 0px;

    font-size: 11px;

    font-family: Verdana;

    background: #333333 url('../../media/images/layout/background.gif') repeat-y center top;

}

#external_container {

    width: 100%;

    margin: 0px;

    padding: 0px;

    text-align: center;

}

#internal_container {

    width: 918px;

    margin: auto;

}

#site_wrapper {

    float: left;

    width: 918px;

    margin: auto;

    background-color: #CCCCCC;

    clear: left;

    display: inline;

}

ziycon

Added a screen shot of the problem, the red circle at the left you'll see the overlapping pixel and the red circle on the right you'll see the space.

ziycon

Anyone have any ideas, i can't find anything on the net about this issue? I've tried everything to resolve it but can't seem to and its only IE 7 it occurs on?!

Div 1px out in IE7

re: Div 1px out in IE7

re: Div 1px out in IE7

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about