Menù orizzontale di immagini: spazio tra elementi

[gnola]

Buongiorno a tutti,
Ho fatto un menù orizzontale di immagini (le dimensioni non sono uguali) ma tra una voce e l'altra c'è uno spazio nonostante abbia messo margini e padding a 0...
come posso attaccare tutte le voci della lista?

Un'altra cosa...vorrei fare un rollover sulle immagini...come devo muovermi?? avevi già fatto una cosa del genere ma le immagini erano tutte uguali e definivo tutto nel css...in questo caso come potrei fare?

grazie a tutti!

ecco il codice:


--------------CSS---------------

#menu {
background-color:#99FF66;
height:58px;
position : relative;
top : 0px;
padding:0;
margin:0;
}

div#menu ul{
padding: 0;
margin: 0;
list-style-type: none;
}
div#menu li{
display: inline;
padding: 0;
margin: 0;
}


-------------------------------------------


-------------------HTML-------------------

<div id="menu">
<ul>[*][img]img/home.jpg[/img][*][img]img/appartamenti.jpg[/img][*][img]img/location.jpg[/img][*][img]img/gallery.jpg[/img][*][img]img/prenota.jpg[/img][*][img]img/guestbook.jpg[/img][*][img]img/contatti.jpg[/img][*][img]img/link.jpg[/img][/list]
</div>

------------------------------------------------

[H5N1_Aviaria]

Per risolvere il problema degli spazi:

div#menu li{
display: block;
float : left;
padding: 0;
margin: 0;
}

Per il rollover devi o affidarti ai css creando un'immagine vuota(sfondo trasparente) ed assegnare agli elementi IMG uno sfondo che cambi con :hover o affidarti a javascript.

[gnola]

Grazie milleeeeeee !!

Per il rollover ho optato per il javascript....

Ciao