Rollover bei Navigationsleiste mit in Grafik gerasterten Text?!

Die Situation ist folgende:
Meine jetzige Navigationsleiste (Horizontal) besteht aus einem Hintergrundverlauf, die Titel sind in transparenten .pngs gespeichert (Wollte eine eigene Schrift, aber einen ganz neuen Font zu machen lohne sich da wirklich nicht - für 9 Worte...
Aufgebaut ist sie als mit CSS formatierte Liste.

Das Endergebnis sollte dann etwa so aussehen - fokus ist auf news:
[Blockierte Grafik: http://homepage.alice.de/jbjhjm/example.png]

Wie realisiere ich da jetzt am besten einen rollover-Effekt?
Ich könnte natürlich für jeden einzelnen Link ein eigenes Bild festlegen, aber das ist Ladetechnisch nicht so toll. Eigentlich wäre die einfachste Lösung, ein transparentes .png (1x30px, repeat-x) über die Grafik des fokussierten Links zu legen.

Fragt sich nur, ob das mit CSS noch zu realisieren ist?
Letztendlich würde auch Javascript gehen, dann müssen die Anti-Java-User halt auf die Rollovereffekte verzichten...

Zitat von synaptic

ich würde den hintergrund in eine grafik packen und das ganze dann via :hover verschieben (stichwort background-position)

die schrift also die buttontexte dann als transparente png und dann als img-tag ins a-tag stopfen

Stimmt! Gute Idee!
...ich habe mal wieder falschrum gedacht...
Jaja, der Microsoft - also kleinweich -IE... bis vor kurzem hatte ich Opera als Haupt- und den IE8 als Nebenbrowser, aber nun habe ich ihn gegen Firefox ersetzt, mit den Zahlreichen Pluginns und der besseren Performance ist der doch wirklich angenehmer - zum beispiel FireFTP - sehr komfortabel, einfach per Firefox-plugin alles auf den Server zu laden...

Also synaptic, vielen Dank, das sollte funktionieren!

Ergänzung - Jungs, streitet euch nicht, in ein paar Jahren ist der IE6 doch gar nicht mehr Windows-kompatibel
Ne im Ernst grundsätzlich ist es sinnvoll, wenn man im Internet unterwegs ist, auch einen halbwegs aktuellen Browser zu benutzen!

developer toolbar kenne ich noch nicht, firebug hatte ich schon mal im Auge, aber noch nicht installiert...

Wie schon gedacht funktioniert dein Tipp super!

Eines der besten Features von Firefox: Du kannst irgendeinen Begriff eingeben, und wenn die passende Seite schon mal besucht wurde, wird sie gleich angezeigt - also jetzt nicht url-ergänzung, sondern ich hatte einen Suchbegriff eingegeben, und statt zu googlen, kam gleich das Ergebnis. Ich war schon iwie überrascht

Und mit ein paar Tipps&Addons habe ich auch alle Features, die ich an Opera liebe - Sitzungen speichern, die Sidebar, Mausgesten etc.
Das einzige was mir fehlt: Wenn man 30 Tabs geöffnet hat, zeigt Opera die Reiter sehr schmal an, aber man hat alle im Blick, bei Firefox muss man entweder scrollen und suchen, oder erst das Auswahlmenü öffnen. Naja was soll's...

So genug über Firefox, ist wirklich ein guter Browser!

So ich hänge hier gleich nochmal was an:

Hat sich erledigt - hatte mich bloß bei den <code></div></code> Tags verzählt, da kann ich am stylesheet rumbasteln, solange ich will...

WIe ihr hier: http://homepage.alice.de/jbjhjm/ sehen könnt, funktioniert die navbar ganz gut, aber der graue Balken darüber macht Probleme, der sollte nämlich eigentlich ganz unten sein statt da oben.
Leider finde ich einfach nicht heraus, warum er absolut dort oben bleiben will.
Anders formuliert: wie kann es überhaupt sein, dass "div2", das nach "div1" im Quelltext eingetragen ist, über diesem angezeigt wird???

P.S.: Bitte erzählt mir nicht, wie schlecht und unpraktisch der Quelltext ist/ sein könnte, ich bin absolut in der Bauphase, das Optimieren bzw. die Fehler-entfern-Phase kommt danach!

Zitat von Tobse

Weil der Div über position:absolute; "über" den rest geschoben wird, so wird platz frei, wo er war. Dorthin "plumpst" dann deine Navi und weil drüber freier raum is geht der Div da hin.

P.S.: Aber was willst du mit 30 Tabs?

Das sollten mal Unterkategorien werden, aber die werde ich nach meinem Aktuellen Stand wahrscheinlich so gar nicht mehr nutzen...