Salve a tutti, non riesco a trovare una soluzione.


la mia pagina ha 5 div: un header, una colonna sinistra un contenitore centrale e una colonna laterale e un footer. La mia intenzione è affiancare allo sfondo della colonna sx (un DIV) lo sfondo del DIV centrale. in IE6 funziona bene. Il problema è in IE7. L'immagine del div centrale sembra allinearsi con il corpo della pagina, come se il div centrale non esistesse. ecco il link:
http://www.directivo.aamgu.es/home.php

ecco il codice html:
codice:
<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 type="text/javascript">


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.</p>
  </div>

<div id="footer">


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

</body>
</html>
ed ecco il CSS

codice:
@charset "utf-8";
body, p, h1{margin:0; padding:0;}
body  {
	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: 30px;
	text-align: justify;
	height:550px;
	padding: 0px;
} 
.thrColFixHdr #header {
	padding: 0px 0px 0px 0px;
	height:100px;
	width: 780px;
	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;
}
aiutatemi per favore
un saluto