Cari amici,

sono nuovo del forum e vi chiedo aiuto.
Il problema è la collocazione dell'immagine background di un div che in IE7 se ne va fuori dello stesso div mentre in IE6 si vede perfettamente.

questo è il link della pagina
http://www.directivo.aamgu.es/home.php

questo è il codice HTMLnserito in una pagina php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css">

<script>


function startmenu()
{
document.getElementById('menu1').style.display = "none";
document.getElementById('menu2').style.display = "none";
document.getElementById('menu3').style.display = "none";
document.getElementById('menu4').style.display = "none";
}
function menufunc(menuId)
{
if(document.getElementById(menuId).style.display == "none")
{
startmenu();
document.getElementById(menuId).style.display = "block";
}
else
{
startmenu();
}
}
</script>
</head>
<body class="thrColFixHdr" onLoad="javascript:startmenu()">
<div id="container"><div id="header"></div>
<div id="sidebar1">
<div id="menu">
<table width="100%"><tr><td valign="top" width="20%">
home
estatuto
<div id="menu1" class="menu1"> - proposta 1
- proposta 2
- proposta 3
- proposta 4</div>Vota
<div id="menu2" class="menu1" > - accedi

- risultati</div>Commenti
<div id="menu3" class="menu1"> - Inserisci
- Visualizza
</div>Foto
<div id="menu4" class="menu1"> - Inserisci
- Galleria
</div></tr></table>
</div>
</div>
<div id="sidebar2">
<p align="center"><font size=3>Anuncios</font></p>

<MARQUEE onmouseover=this.stop()
onmouseout=this.start() scrollAmount=1
scrollDelay=10 direction=up height=320
align="center" width="155
<p align="center">

<?php
include("shortnews.php");
?>
</p>
</marquee>
</div>

<div id="mainContent">
<h1> Main Content </h1>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convalli rhoncus venenatis, tristique in, vulputate at, odio.nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,</p>
</div>

<div id="footer">


Palacio del Infantado - Plaza de los caidos 19001 - Guadalajara
info@aamgu.es</p></div>
</div>

</body>
</html>



e questo il CSS

@charset "utf-8";
body, p, h1{margin:0; padding:0;}
body {
display:compact;
line-height: 24px;
font: 75% Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-color: #FFF;
overflow: hidden;
height: 500px;
scrollbar-base-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-dark-shadow-color: #FFFFFF;
scrollbar-3d-light-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
text-align: center;
}
.thrColFixHdr #container {
width: 780px;
margin: 30 auto;
text-align: justify;
height:550px;
paddin: 0px;
}
.thrColFixHdr #header {
padding: 0px 0px 0px 0px;
height:100px;
width: 780 px;
background-image: url(b3.gif);
margin-bottom: 20px;
}
.thrColFixHdr #header h1 {
margin: 0px;
padding: 10px 0px;
}
.thrColFixHdr #sidebar1 {
width: 150px;
padding: 15px 0px 15px 20px;
height:400px;
color: #CCC;
float: left;
margin: 0px;
padding: 0px;
background-image: url(b2.gif);
display: block;
overflow: hidden;
}
.thrColFixHdr #mainContent {
margin: 0px;
padding: 15px 40px 15px 20px;
height:400px;
overflow:auto;
background-image: url(b1.jpg);
background-repeat:no-repeat;
width: 450px;
float: left;
background-attachment: fixed;
}
.thrColFixHdr #sidebar2 {
float: right;
width: 180px;
padding: 15px 10px 15px 15px;
height:400px;
overflow:auto
}
.thrColFixHdr #footer {
padding: 0;
height:50px;
overflow:hidden;
color: #9E7252;
text-align: center;
width: 780px;
line-height: 12px;
font-size: 10px;

}
.thrColFixHdr #footer p {
margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0px;
background-attachment: fixed;
background-repeat: no-repeat;
width: 790px;
top: 484px;
}



Grazie sono disperato!!