posizionamento errato tra IE e FF per div nascosti

[mosquito70]

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

	<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

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

#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

[mosquito70]

Scusate se ripropongo questo 3D, ma non ho ancora trovato una soluzione

Grazie

[Mich_]

Quale DTD usi?
Se usi una DTD transitional, prova a passare ad XHTML 1.0 Strict: in tal caso IE interpreta in modo molto piu` conforme agli standard (e quindi si avvicina molto agli altri brwoser)

[blekm]

Originariamente inviato da mosquito70
Avete qualche consiglio da darmi su come risolvere il problema per IE.

dopo aver seguito il consiglio di Mich, prova ad usare i commenti condizionali per IE

[mosquito70]

Intanto grazie per le risposte.

Purtroppo però cambiando el DTD non è cambiato nulla.
Prima era

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

e poi ho inserito

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ma il risultato è identico.

Blekm, non ho capito che cosa dovrei fare.

Grazie ancora

[Prill]

C'è qualcosa che non torna ed appare direttamente dal codice, peraltro manca il css completo, la prima non influisce di sicuro avendo a che fare con le altezze, il body ha un'altezza minima di 552 pixel, mentre il container è 468 e il div al suo interno 600; la seconda invece nel codice html con l'inclusione di div all'interno dell'elenco ma al di fuori delle voci elenco, dove non possono stare.
Il div cronologia ha un posizionamento assoluto quando è mostrato, ma è posizionato rispetto a cosa? non riesco a capirlo dal codice. Forse il link sarebbe d'aiuto

[mosquito70]

Originariamente inviato da Prill
C'è qualcosa che non torna ed appare direttamente dal codice, peraltro manca il css completo, la prima non influisce di sicuro avendo a che fare con le altezze, il body ha un'altezza minima di 552 pixel, mentre il container è 468 e il div al suo interno 600; la seconda invece nel codice html con l'inclusione di div all'interno dell'elenco ma al di fuori delle voci elenco, dove non possono stare.
Il div cronologia ha un posizionamento assoluto quando è mostrato, ma è posizionato rispetto a cosa? non riesco a capirlo dal codice. Forse il link sarebbe d'aiuto

Grazie della risposta.

Il link è questo, e spero non violi le regole del forum inserirlo.
Nel caso rimuovetelo direttamente.

link

Intanto cerco di capire da quello che mi hai scritto se posso risolvere.

Ciao

ps. il sito non ha alcun carattere commerciale, ma è un sito personale.

[Prill]

I div non sono centrati neanche con Firefox (sto usando una risoluzione di 1024), nel div cronologia (ma stesso sistema può essere usato anche per gli altri) puoi innanzitutto convertire la larghezza in pixel (il 55% di 990 pixel che mi pare sia il contenitore), immaginiamo che sia 500px e avere

#cronologia.show  {
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-250px;/* il margine sinistro deve avere un valore negativo pari a metà della larghezza*/
    width:500px;
    height:80%;
    z-index: 50;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #fff url(../icone_sfondi/semitrans.png);   /* immagine di sfondo semitrasparente */
}

[mosquito70]

Grazie per la risposta.
Ho notato qualche miglioramento cambiando da percentuale a pixel, la dimensione width.
Il miglioramento è che, ad esempio nel caso della sezione "album" il nuovo div si "vede" correttamente (almento con la IE7) ma, rispetto a Firefox, non corrisponde il posizionamento, "margin-left".

[CODE]
#album.show {
position: absolute;
margin-top:50px;
margin-left:-100px;
width: 1100px;
height: 85%;
z-index: 50;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: url(../icone_sfondi/semitrans.png); /* immagine di sfondo semitrasparente */
}
[/QUOTE]

Il margine negativo può essere un problema per IE?
Ho provato ad inserire solo "left", ma non risolve il problema.

Il codice modificato lo trovate on-line.

Grazie ancora per i suggerimenti che mi avete dato e per quelli futuri.
Spero di risolvere.

Ciao

[Prill]

per centrare con questo sistema tutti i div a comparsa come detto su

/* il margine sinistro deve avere un valore negativo pari a metà della larghezza*/

è necessario però che il div non sia più largo della struttura della pagina altrimenti a risoluzioni basse o a finestra ridotta hai tagli. Se prevedi perciò div a comparsa di 1100 pixel o oltre, assegna una larghezza corrispondente al div outer