Ciao a tutti,
non so se il titolo è appropriato, ma cercherò di spiegarmi meglio descrivendo il problema.

Partendo dalla home page ho una serie di div nascosti che visualizzo al click sull'immagine principale. Chiaramente utilizzo un semplice javascript per renderli visibili di volta in volta.
Il problema è che ho un comportamento diverso per tutti i div, tra IE e FF, come potete vedere in figura, dove nel caso di IE, il div si sposta verso destra.

Queste le due immagini

(FF corretto)

(errore IE)



Questo è il codice della home page

codice:
	<div id="outer">
		<div id="container">
			<div id="inner">
				<ul id="menu">
				[*]
				    	<div id="cronologia "></div>
				        <div id="forminvioinfofoto" class="hidden"></div>				[*]

				    <div id="album" class="hidden"></div>				[*]
					    <div id="lastoria"></div>
				[*]
				 	    <div id="ricordi"></div>
					    <div id="formricordi"></div>
					    <div id="formCommentoPost"></div>
					    <div id="formalbum"></div>
                    		[*]XXXXX 

				[/list]
			</div>
		</div>
	</div>
e questo il codice css relativo alla Home Page

codice:
body {background-image: url('../icone_sfondi/bg.gif');
	background-repeat:repeat-x;
	text-align:center;
	min-height:468px;/* for good browsers*/
	min-width:552px;/* for good browsers*/
}

#outer{	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

#container {text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height: 468px;
}

#inner {width: 800px;
	background: url('../icone_sfondi/ziaclara.png');
	height: 600px;
	margin-left:auto;
	margin-right:auto;
	border:0px solid #000;
}

/*
** Altri Stili
*/
#cronologiamenu {width: 280px; 
            height: 200px; 
            border:0px solid red;}
             
#albummenu {    margin-left:160px; 
            width: 270px; 
            height: 228px; 
            border:0px solid yellow;}
             
#ricordimenu {  margin-top:90px;
	    margin-left:170px;
	    width: 280px; 
            height: 260px; 
            border:0px solid green;}

#lastoriamenu { margin-top:110px;
	    margin-left:70px; 
	    width: 250px; 
            height: 240px; 
            border:0px solid black;}

#bimodesign { margin-top:15px;
	    margin-left:320px; 
	    width: 200px; 
            height: 40px; 
            border:0px solid black;}

#cronologiamenu, #albummenu, #ricordimenu, #lastoriamenu, #bimodesign {float:left;}

#menu {list-style-type: none;}

#menu a {font-family: Verdana, "MS Sans Serif", Geneva, sans-serif,"Trebuchet MS", sans-serif;
		    color: white;
		    text-align: left; 
		    text-decoration: none;
		    outline:none;
		    font-size:0.9em;
		    line-height:1.2em;}

Mentre questo il CSS relativo al div "cronologia" (l'ho evidenziato in precedenza), uno dei 4 presenti nella pagina
codice:
#cronologia.hidden {
  display: none;
}

#cronologia.show {
  position: absolute;
  margin-top:50px;
  margin-left:0px;
  width: 55%;
  height: 80%;
  z-index: 50;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: url(../icone_sfondi/semitrans.png);   /* immagine di sfondo semitrasparente */
}	
........................................
... ometto il resto del codice
.........................................
Avete qualche consiglio da darmi su come risolvere il problema per IE.
Se necessario posso inserire anche il link al sito che è (purtroppo) già on-line...

Grazie in anticipo