Salve,

ho il seguente codice html:

<body>
<div id="menu"></div>
<div id="header"></div>
<div id="pagina">
<div id="spazio-tabella">
</div>
</div>
<div id="footer"></div>
</body>

cinque div, di cui uno è dentro un altro.

Nell' head ho questo:

<head>
<style type="text/css">
body {
padding: 0;
text-align: center;
}
#menu{
text-align: center;
height:20px;
background-image: url(menu.jpg);
background-repeat: no-repeat;
background-position: top center;
margin-top: 20px;
}
#header {
text-align: center;
height:270px;
background-image: url(top.jpg);
background-repeat: no-repeat;
background-position: center;
}
#pagina {
text-align: center;
width: 800px;
height: auto;
padding: auto;
margin: auto;
background-color: white;
background-image: url(content.jpg);
background-repeat: repeat-y;
background-position: center;
}
#spazio-tabella{
text-align: center;
padding: auto;
margin: auto;
width: 710px;
height: auto;
text-align: left;
font-size: 15px;
font-family: Trebuchet ms, Tahoma;
}
#footer{
text-align: center;
height:55px;
background-image: url(bottom.jpg);
background-repeat: no-repeat;
background-position: center;
}
</head>

Problema:
le immagini di sfondo del div pagina e del div header sono disallineate (1 px a dx con FF, 1 px a sx con GC, centrato con IE8).
Suggerimenti?
Grazie.