Ciao a tutti, ho un problema con un cambio di classe con CSS tramite javascript.

Se visualizzato con IE 8, Firefox, Chrome il sito si comporta correttamente.

Se visualizzato in IE 7, il div main crea un margine destro enorme e si sposta in fondo alla pagina.

Potete vedere il sito qui: www.lukiep.it/progetti/mare/layout.html (è ancora in costruzione, ho lasciato colorati i div per chiarezza).

Lasciando perdere gli altri dettagli, il MAIN (quello che diventa ROSSO) ha una classe di default "standard" che, quando lo schermo si riduce sotto i 950px di larghezza, cambia in "tinyscreen".

Ecco parte del codice:
codice:
html, body {
 height: 100%; 
 /*questo serve per estendere le img background fino a fondo pagina*/ 
}

body {
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: #FCF;
	/* Metto a 0 tutti i margini e i bordi per non avere padding */
	background-color:#FF0;
}

/* MAIN SCHERMO NORMALE */
.standard{
	width: auto;
	height: 100%;
}

/* MAIN SCHERMO MICRO */
.tinyscreen {
	position: absolute;
	background-color:#F00;
	width: 400px;
	height: 100%;
	left: 550px;	
}

Come mai da questo effetto strano?