[CSS] Divisione immagine per un menu

Devo fare il menu per un sito ed esso è composto da un'immagine di una pergamena (per ora ci ho messo la prima carina che ho trovato in rete) al cui interno sono inserite le voci del menù.
Se provate ad andare qui: http://drako1989.altervista.org/xhtml/index.html potete notare come ho fatto: ho diviso l'immagine in 3 parti (superiore, centrale, inferiore) (ovviamente la divisione è stata fatta volontariamente a membro di segugio, così da poter capire dove l'immagine veniva appunto divisa) e, si nota anche guardando il codice html, ho messo l'immagine superiore e inferiore esterne alla lista del menu e il body l'ho messo come sfondo dell'intero div menù.
Gli svantaggi sono notevoli, cioè si nota il body (la parte centrale della pergamena) anche sotto la parte superiore e quella inferiore.
Però ha un vantaggio molto grande, cioè mi permette di dare un margine sinistro alla lista, senza applicare lo stesso anche all'immagine.
C'è un modo per risolvere gli svantaggi e continuare ad avere quel vantaggio??
Un'ultima cosa: è possibile iniziare la lista nella parte superiore della pargamena?? devo per forza di cose utilizzare il position??
Grazie mille,
Luca

piazzare li degli <img> e sperare che vadano d'accordo con del css è un po' ingenuo :mrgreen:
Se metti tutto assieme nel css, riesci ad ottenere un comportamento uniforme, e sopratutto degradi non con immagini in mezzo ma decentemente.

quindi, via gli <img> e metti tutto nel css. Purtroppo bisogna "dare un senso" ai tag che metti, quindi ho aggiunto un titolo "Menu", che ha come sfondo la cima della pergamena e il cui testo è nascosto via display: none.

Puoi dare un'occhiata qua alla versione riveduta e corretta (sia html che css sono stati cambiati)

Per quanto riguarda i pezzi che si sovrappongono, beh, togli la trasparenza alla gif e via

uh, e viene fuori uguale su IE6 e FF :=):

questo post è scritto in disordine, riordina i paragrafi se necessario :tongue

Grazie mille dread, seguo il tuo consiglio ;)

EDIT: Ehm.. dread, a dire il vero mi sembra un pochino complicato in quel modo (o meglio, ho tentato di farlo mischiando un po' il tuo metodo al mio)
Come è venuto ora, è quasi perfettamente come lo voglio (se riuscissi a ridurre di pochissimo lo spazio tra gli span e le liste ul sarebbe proprio perfetto), ma c'è un problema: con firefox viene benissimo, con ie viene malissimo :\
Come posso modificarlo per farlo vedere così anche su ie??

Grazie mille ancora scusami il disturbo!!