Menu diverso in IE

[MadBob]

Ho creato un menù, generato dal codice sotto riportato.
Non ho utilizzato gli elementi <UL> e <LI> perchè così facendo il menù mi sta contenuto perfettamente nella sua sede mentre con i LI mi veniva spostato leggermente in basso a destra.
Il menù si vede correttamente in Firefox, safari e chrome, mentre in IE anzichè essere orizzontale, viene visualizzato in verticale e per la lunghezza massima degli elementi.
Riporto sotto un immagine, il link ed il codice.
Grazie
- Kiko -

www.dalessandroegalli.com/nuovo/

<div id="menu">
   <div class="collega">[url="http://www.dalessandroegalli.com/nuovo/index.php"]<span>Home</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/tickets.php"]<span>Tickets</span>[/url]</div>

<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/history.php"]<span>History</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/archivio.php"]<span>Archive</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/"]<span>Festivals</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/cantacts.php"]<span>Contacts</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/mail.php"]<span>Mail</span>[/url]</div>
</div>



#menu {
    
    width:920px;
    height:35px;
    background-color:#000;
    margin:0;
    padding:0;
}

.collega{
    position:relative;
    top:0px;
    left:0px;
    padding-left: 0;
    margin-left: 0;
    background-color: #333;
    color: White;
    float: left;
    width: 100%;
    display: inline;
    
}

.collega a
{
    float: left;height: 35px;padding-left: 18px;
    font: bold 14px arial, helvetica, sans-serif;
    background: url(../img/bottone.png) no-repeat top left;
    text-decoration: none;color: #FFCC00;
    line-height:30px;
    display: inline;
}
.collega span{
    display: block;
    height:35px;
    padding-right: 18px;
    background: url(../img/bottone.png) no-repeat top right
    display: inline;
}
.collega a:hover
{
background-position: bottom left;
color: #FFF;

}    
.collega a:hover span{
background-position: bottom right;
line-height:30px;
} 

[MadBob]

Nessuno ha idea del perchè ?
grazie
- Kiko -

[seven_eyes]

Ciao,
probabilmente è il width=100% che dai alla classe .collega.

p.s.
Sicuro di non voler utilizzare gli ul, a livello di markup html il tuo codice è un pò incasinato con tutti quei div. Anche se setti margin e padding a zero, il menu si sposta a destra?