Button-Optik Probleme

[Twilo]

Hallo,

sorry, mir fällt kein besserer Betreff ein

ich bin hier schon etwas am verzweifeln...

ich habe folgende Grafik

die Menüpunkte sollen ungefähr so aussehen
für mein Menü verwende ich eine Liste

wie muss ich das angehen, damit das ganze noch gut aussieht, wenn man die Schriftgrösse verändert

ich habe das bis jetzt so probiert (zum testen hab ich inline-Style verwendet), dafür hab ich die Grafik auseinander geschnitten

<ul id="menu">  
  <li style="position: relative; height: 2em; width: 10em; background: #b2ecff url(/Bilder/startseite_rechts.gif) repeat-y right center;">  
    <div style="z-index: 5;background:url(/Bilder/startseite_links.gif) left bottom no-repeat; width: 20px; height: 2em;position: absolute; top: 0; left: 0;"></div>  
    <div style="width: 10em; height: 16px; background:url(/Bilder/startseite_oben.gif) right top no-repeat; position: absolute; top: 0; right: 0;"></div>  
    <div style="z-index:100; line-height: 1.7em;position: absolute; top: 0; left: 25px;"><a href="#">Startseite</a></div>  
    <div style="width: 10em; height: 16px;background:url(/Bilder/startseite_unten.gif) right bottom no-repeat; position: absolute; bottom: 0; right: 0;"></div>  
  </li>  
  <li>...</li>  
</ul>  

im Internet Explorer und bei Opera, bei bestimmten Vergrösserungen, wird die  startseite_unten.gif Grafik und ganz unten angezeigt, sondern etwas höher

warum die Browser das machen kann ich mir nicht erklären :-(
Firefox und Konqueror stellen es mir so dar, wie ich es mit vorstelle

der Code für diese Ausgabe finde ich etwas overhead

gibt es dafür eine bessere Lösung?

mfg
Twilo