Problème de décalage de div sous IE6

Bonjour,

Je suis occupé à développer un template pour un site dynamique en Joomla, pour des raisons de placement des images background, j'ai imbriqué un div #container positionné en absolu dans un div#supracontainer positionné en relative (les deux div ayant la même largeur), sous FF et IE7 tout se passe bien mais sous IE6 mon div#container est repoussé vers la droite ce qui fait passer mon menu logiquement situé à droite en dessous et donc il se retrouve finalement à gauche en dessous de la bannière)

voici l'adresse de la page pour que vous puissiez voir le problème (à condition d'avoir IE6 sur sa machine) : http://www.fredericvervisch.com/index.php?lang=fr


voici mon html (j'ai enlevé le contenu des balises table pour simplifier le code):

<div id="supracontainer">
    <div id="container">
    
        <div id="banner">
        
        	<div id="flash_content">
            	<object type="application/x-shockwave-flash" title="Banner Flash Frederic Vervisch" data="templates/test/images/banner_fv.swf" width="862" height="300">
                <param name="movie" value="templates/test/images/banner_fv.swf" />
                <param name="wmode" value="transparent" />
          </object>
            </div>
            
            <div id="menu">
            		<table cellpadding="0" cellspacing="0" class="moduletable">
		</table>
</div>
            
        </div><!-- fin div banner -->
        
        <div id="leftcolumn">
        		<table cellpadding="0" cellspacing="0" class="moduletable-news">
					</table>
		        
              		<table cellpadding="0" cellspacing="0" class="moduletable">
							</table>
				<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<a href="http://www.formel3.de/video.html" target="_blank">
<div style="text-align: center">
<img src="http://www.formel3.de/images/player.gif" border="0" alt="VIDEOS" title="VIDEOS" hspace="5" vspace="5" width="110" height="83" />
</div>
</a>
			</td>
		</tr>
		</table>
				<table cellpadding="0" cellspacing="0" class="moduletable">
						</table>
		        </div>
        
        <div id="main">
        <table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top
		</table>
		        </div>
    
    </div><!-- fin du div container -->
</div> <!-- fin du div supracontainer --> 

et mon css :

body 
{
        margin:0;
        padding:0;
        color: white;
        font-weight: bold;
        font-size: 12px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        background-color:#d3d2d2;
        background-image: url(../images/fond.jpg);
        background-repeat: repeat-y;
        background-position: top left;  
}
 
body, html
{
        height: 100%;
}
 
#supracontainer
{
        position:absolute;
        top: 0;
        left: 50%;
        width: 1082px;
        margin-left: -541px ;   
        min-height: 100%;
        background : url(../images/supracontainer.jpg) repeat-y;
}
 
#container
{
        position:relative;
        top: 0px;
        left: 50%;
        width: 1082px;
        margin-left: -541px;    
        
        min-height: 100%;
        background : url(../images/vervisch_container.jpg) no-repeat;
}
 
#banner
{
        float:left;
        width: 1082px;
        height:308px;
        background-color: transparent;
}
 
#flash_content
{
        float:left;
        margin-left: 15px;
        width: 862px;
        height:300px;
}
 
#menu
{
        float:left;
        width: 205px;
        height:275px;
        padding-top: 25px;
}
 
#leftcolumn
{
        float:left;
        
        min-height: 100%;
        width: 255px;
        
}
 
#main
{
        float:left;
        min-height: 100%;
        width: 532px;
        padding-top: 25px;
        padding-left: 45px;
        padding-right: 45px;
        color: #666666;
        background-color:#FFFFFF;
}
 
#rightcolumn
{
        float:left;
        width: 250px;
        
        min-height: 100%;
        background-color:#transparent;
}
 
#footer
{
        clear:both;     
        width: 532px;
        margin-left: 295px;     
        margin-bottom: 50px;
        background-color:transparent;
}
 
a:link
{
        color:#FFFFFF;
        font-weight: bold;
        text-decoration: none;
}
 
a:hover
{
        color:#AC9FBD;
        font-weight: bold;
}
 
#menu a
{
        display: block;
        margin-bottom: 15px;
}
 
#menu li
{
        list-style-type: none;
}
 
 
 
ul.jflanguageselection
{
        float: left;
        vertical-align: middle;
        list-style: none;
        padding: 0;
        margin-top: 10px;
        margin-left:30px;
        padding-bottom: 125px;
        font-size: 0.8em;
}
 
ul.jflanguageselection li
{
        background-image: none;
        padding-left: 0px;
        padding-right: 0px;
        float: left;
        margin: 0px 1px 1px 1px;
        white-space: nowrap;
        border: none;
}
 
 
ul.jflanguageselection img
{
        margin-top: 10px;
        margin-top: 0px !important;     
        margin-right: 15px;
        border: none;
}
 
 
 
#leftcolumn table
{
        margin-left: 50px;
}
 
#leftcolumn table.moduletable
{
        margin-bottom: 50px;
        margin-left: 70px;
}
 
 
.flags
{
 
        margin-top: 5px;
        margin-bottom: 20px;
}

Merci d'avance pour votre aide !
Modifié par finalfx (26 Sep 2007 - 09:14)

Bonjour finalfx,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

voilà, j'ai édité mon message