salve, sto facendo un semplice sito, che pur essendo validato correttamente dal W3C sia per l'xhtml che per i css, mi dà un errore di visualizzazione della pagina su IE 7



E' sicuramente un problema di IE7 ma non saprei come correggere per far venir centrato quell'elemento che si vede tutto a dx.
vi posto il codice:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pasubio2, traduzioni e sottotitoli intralinguistici per film, documentari e serie TV</title>
<meta name="description" content="Traduzioni multilingua e sottotitoli per non udenti realizzati con tecniche e strumenti all'avanguardia per documentari, film e serie TV "/>
<meta name="keywords" content="sottotitoli per non udenti, traduzioni per la TV, traduzioni e sottotitoli per la televisione"/>
<meta name="robots" content="index, follow"/>
<meta name="language" content="IT"/>
<meta name="copyright" content="copyright Pasubio2"/>
<meta name="author" content="Graf, studio grafico e tipografia digitale a Roma - info@graf.roma.it"/>
<link rel="shortcut icon" type="image/x-icon" href="http://www.pasubio2.com/favicon.ico" /> 		
<link rel="icon" href="http://www.pasubio2.com/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="showcase.css" />
<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="effects.js"></script>
	<script type="text/javascript" src="showcase.js"></script>

</head>

<body onload="init()">
<div id="contenuto">
<div id="testata">[img]images/logo_Pasubio2.png[/img]<div style="clear:right"></div>

<ul id="nav" >
<li id="chi-siamo">chi siamo
<li id="traduzioni">Traduzioni
<li id="sottotitoli">Sottotitoli
<li id="lavora_con_noi">lavora con noi
<li id="contatti">Contatti[/list]
</div>
<div id="centrale">
<div class="showcase" id="horizontal">
		[img]images/bi.png[/img]
		[img]images/ba.jpg[/img]
		<ul class="showcase">
			[*][img]images/foto3.jpg[/img]
			[*][img]images/foto2.jpg[/img]
			[*][img]images/foto4.jpg[/img][*][img]images/foto1.jpg[/img]
			[*][img]images/foto5.jpg[/img]
		[/list]
	</div>	
  <script type="text/javascript">
		document.observe('dom:loaded', function () {
			new Showcase.Horizontal($$('#horizontal ul li'), $$('#horizontal a.controls'), {duration: 0.3});
			});
	</script>
    <div style="clear:both"></div>
 <h1 class="titolo"> Traduzioni e adattamenti multilingua e sottotitoli intralinguistici
 per
  documentari, serie TV e film
</h1>
</div>
[img]images/home.jpg[/img]
[img]images/bot_avanti.jpg[/img]</div><div id="footer">
  <ul class="elenco">[*]Pasubio Due srl
		[*]Via Pasubio 2 - 00195 Roma - Italia[/list]
<ul class="elenco">
	[*]Tel.  +39 06 97277586
	[*]Fax +39 06 36003704[/list]
<ul class="elenco">
	[*]e mail: apepe@pasubio2.com
	[*]e mail: eciulli@pasubio2.com[/list]
<ul class="elenco">
	[*]
	[*]Partita IVA:  11185911002[/list]
<ul class="elenco">
	[*][*]credits[/list]
</div></body>
</html>
e questo è la parte di CSS interessata

codice:
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
	font-family: "Century Gothic", sans-serif;
    font-size: 100%; 
   }
	
@font-face 
{font-family:"Century Gothic"; 
src: url("http://www.pasubio2.com/prova/century gothic/GOTHICI.eot");} 

@font-face {font-family: Century Gothic; src: url("http://www.pasubio2.com/prova/century gothic/GOTHICI.TTF");}


@font-face 
{font-family: "Century Gothic"; 
src: url("http://www.pasubio2.com/prova/century gothic/GOTHICB.eot");} 

@font-face {font-family: Century Gothic; src: url("http://www.pasubio2.com/prova/century gothic/GOTHICB.TTF");}

@font-face 
{font-family: "Century Gothic"; 
src: url("http://www.pasubio2.com/prova/century gothic/GOTHICBI.eot");} 

@font-face {font-family: "Century Gothic"; src: url("http://www.pasubio2.com/prova/century gothic/GOTHICBI.TTF");}

@font-face 
{font-family: "Century Gothic"; 
src: url("http://www.pasubio2.com/prova/century gothic/GOTHICC.eot");} 

@font-face {font-family: "Century Gothic"; src: url("http://www.pasubio2.com/prova/century gothic/GOTHICC.TTF");}

body {
    line-height: 1; background-image:url(images/bodyGrigio.jpg); background-repeat:no-repeat;}
	
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
/* remember to define visible focus styles!
:focus {
    outline: ?????;
} */
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
table {
	border-collapse: collapse;
    border-spacing: 0;
}

html, body {
	text-align: center;
}

#contenuto {
	width:990px; 
	height:745px;
	margin:auto; 
	text-align:center; 
	position:relative;
}

#contenuto img.prima {
	margin:10px auto 30px auto;
}

#contenuto img.bothome {
	float:left; 
	position:absolute; 
	left:0px; 
	bottom: 20px;
}

#contenuto img.botav {
	float:right;
	position:absolute; 
	right:0px; 
	bottom: 20px;
}

#contenuto img.botind {
	float:right;
	position:absolute; 
	right:50px; 
	bottom: 20px;
}

#contenuto img.mail {
	position:absolute; 
	right:390px; 
	bottom: 120px;
}


#contenuto h1 { 
	font-size:26px; 
	color:#C00; 
	line-height:36px; 
	padding-bottom:90px;
}

#contenuto p {
	font-size: 20px; 
	font-style:italic; 
	color:#333; 
	line-height:26px; 
}

#testata {
	width:990px; 
	height:180px; 
	margin:auto;
}

#testata img {
	float:left; 
	padding:0;
}

#testata h1 {
	font-size:15px; 
	font-style:normal; 
	text-align:right; 
	position:absolute; 
	top:120px; 
	right:0px;
	font-weight:bold; 
	padding-right:6px; 
	color:#666; 
}

ul#nav {
    list-style-type: none;
    margin:20px 0 0 0;
    padding: 0;
    width: 536px;
	float:right;
	text-align:center;
}

ul#nav li {
    display: block;
    float: left;
    margin:0;
    padding-left: 2px;
    text-indent: -9999px;
}
ul#nav li a {
    display: block;
    height: 31px;
    overflow: hidden;
    text-decoration: none;
}

ul#nav li#chi-siamo a { 
    background:url(images/botrosso_chi-siamo.jpg) no-repeat scroll left top transparent;
    width: 104px;
}
ul#nav li#traduzioni a {
    background:url(images/botrosso_traduzioni.jpg) no-repeat scroll left top transparent;
    width: 104px;
}
ul#nav li#sottotitoli a {
    background:url(images/botrosso_sottotitoli.jpg) no-repeat scroll left top transparent;
   width: 104px;
}

ul#nav li#lavora_con_noi a {
    background:url(images/botrosso_lavoraconnoi.jpg) no-repeat scroll left top transparent;
    width: 104px;
}
ul#nav li#clienti a {
    background:url(images/botrosso_clienti.jpg) no-repeat scroll left top transparent;
    width: 104px;
}
ul#nav li#contatti a {
    background:url(images/botrosso_contatti.jpg) no-repeat scroll left top transparent;
    width: 104px;
}

ul#nav li#home a:hover, ul#nav li#home a:focus, ul#nav li#chi-siamo a:hover, ul#nav li#chi-siamo a:focus, ul#nav li#traduzioni a:hover, ul#nav li#traduzioni a:focus, ul#nav li#sottotitoli a:hover, ul#nav li#sottotitoli a:focus, ul#nav li#lavora_con_noi a:hover, ul#nav li#lavora_con_noi a:focus, ul#nav li#clienti a:hover, ul#nav li#clienti a:focus, ul#nav li#contatti a:hover, ul#nav li#contatti a:focus   {background-position: right -31px;}
	

a.currentPage {
    background-position: right bottom !important;
}
	
#centrale {
	width:768px; 
	margin:70px auto 0px; 
	height:455px;
}

#centrale h1, #centralesott h1 {
	text-align:left; 
	font-size:22px;
	padding-bottom:10px;
	line-height:26px;
}


#centrale h1.titolo {
	width:768px;
	height:70px;
	text-align:center; 
	font-size:22px;
	line-height:39px;
	color:#FFF;
	position:absolute; top:530px; 
	background-image:url(images/basetitolohomepage.png);
	display:block;
	background-repeat:no-repeat; 
	background-position:center; 
}
c'è qualcuno che sa darmi dei consigli?

Inoltre, vorrei sapere come mai quando per prova ricevo la mail della form che si trova alla pagina contatti, il testo mi appare con caratteri strani. al momento il sito ha codifica "charset=utf-8" e la form lavora con una pagina php. Può dipendere da quello? conviene che utilizzi l'ISO8859?


Grazie anticipatamente a chi mi risponderà

Livia