Salve a tutti.

Sto scrivendo un po' di codice per un sito statico, con HTML e CSS.

Ho dei problemi con l'allineamento del menù orizzontale. In pratica, ho creato un div, di altezza e larghezza fissati, con uno sfondo e poi ho centrato in questo div una lista orizzonale che funge da menù del sito.

Prima di questo div, ce n'è un altro contenente un'immagine che rappresenta il logo del sito.

Se mostro il sito con Firefox, il risultato è quello che voglio, mentre in IE (tanto per essere originali), ho una visualizzazione diversa.

Questo è uno screenshot della pagina (non ancora completa), con il menù correttamente posizionato, utilizzando Firefox:



Qua sotto invece, lo screen con lo stesso sito aperto con Explorer 7:



Ho sovrapposto le immagini, e mi sono reso conto che il problema non è della lista orizzontale, che si trova sempre nella medesima posizione, ma esclusivamente del background, che nel caso di IE è spostato più in basso, non andando a coincidere con il bordo inferiore del div del titolo.

Come posso fare per riposizionare il background in IE?

Questo è il codice HTML della pagina

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>Home Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1 id="title">Studio</h1>

    <div id="mainmenu">
        <div class="verticalcentered">
            <ul>[*]Home[*]Progettazione[*]Realizzazione[*]Progetti[*]Pubblicazioni[*]Contatti[/list]
        </div>
    </div>

    <div id="mainbody">
        <h2>Benvenuti</h2>
            

Lo studio di progettazione bla bla bla bla</p>
    </div>
</body>
</html>
Qua sotto, invece, il css che ho utilizzato; nell'ID title ho messo le dimensioni dell'immagine: nell'ID mainmenu l'immagine è un gradiente, di dimensioni pari all'altezza specificata, con una larghezza di qualche pixel ripetuta lungo x, per avere l'effetto...

codice:
body {
	width: 1100px; /* Larghezza della pagina */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 0px 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
	background: #ffffff;
}

#title {
	font-size: 0px;
	margin-left:auto;
	margin-right: auto;
	background-image: url(immagini/titolo.png);
	width: 1002px;
	height: 341px;
}


/* Sezione riguardanti le voci di menù. In questo modo rimangono accessibili */

#mainmenu {
	list-style-type: none;
	padding: 0px;
	background-image: url(immagini/menubkg.png);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	height: 88px;
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	position: relative;
}
.verticalcentered {
	position: absolute;
	top: 11px;
	left: 9px;
	width: 717px;
}




#mainmenu ul {
	vertical-align: middle;
	font-size: 19px;
}

#mainmenu a {
	padding: 3px 3px;
	text-decoration: none;
}

#mainmenu ul li { display: inline; }


/* Sezione riguardante il corpo principale */
#mainbody {

}
Grazie a chiunque mi darà una mano

Daniele