Sto cercando di creare una versione HTML+CSS di un sito che ho fatto in Flash ma ho problemi di rendering su IE7 in particolare per quanto riguarda il padding. La cosa strana è tuttavia che il problema non è sistematico, cioè non si applica a tutti i padding ma solo ad alcuni...

Allego a fondo pagina le schermate dellla versione Flash, il rendering in FF e in IE7 della pagina in questione... il problema riguarda il div "box", che è il box con bordo bianco, il quale ha un padding-top di 14px che FF legge in un modo e IE7 in un altro. L'altro riguarda gli span che contengono i bottoni in basso che hanno tutti un padding-left e un letter-spacing in modo da ricreare la disposizione spaziale dei bottoni in Flash. Il padding-left non è letto allo stesso modo di FF per nessuno degli span da IE7, cosa che si nota in particolare per l'ultimo, "home_bt", che risulta completamente deposizionato. Il problema sembra essere l'unità di misura che non corrisponde nei due browser, ho pensato potesse essere dovuto al letter-spacing che in qualche modo "scalava" i px ma nel div="box" non c'è nessun letter-spacing. Inoltre il div subito sopra "box", quello che contiente la scritta "NEWS" ha un padding-top e un padding-left per posizionare la scritta che viene letto in modo uguale dai due browser (come tutti gli altri padding della pagina)
Ho provato a sostituire nel secondo caso il padding con un margin, ma è uguale.


Aiuto...

Questi i pezzi di css relativi:


#box {
border: 1px solid white;
width: 429px;
height: 357px;
margin-left: 53px;
padding-top: 14px;
}

#home_bt{
font-size:17px;
padding-left: 98px;
letter-spacing: 6px;
}

Queste le pagine

VERSIONE ORIGINALE IN FLASH

HTML+CSS CON FIREFOX

HTML+CSS CON IE7