Da ein Link ein Inline-Element und nur so breit wie nötig ist, wird auch dessen Hintergrund nur so breit wie nötig dargestellt. Durch display: block; wird der Link wie ein Blockelement dargestellt, das sich naturgemäß über die ganze Breite erstreckt. Somit wird auch die Hintergrundgrafik über die ganze Breite dargestellt.
Du hast ja auch angegeben, dass Deine Listenelemente
nebeneinander sein sollen, wie kommt es, dass Du Dich darüber
beschwerst?
Habe ich nirgendwo angegeben.
Das kommt davon, wenn man nicht den vollständigen Code postet.
Im CSS sah es so aus, als wäre Deine Navigation eine Liste (wie man es üblicherweise auch macht), tatsächlich ist Deine Semantik eine andere (nicht geeignete, btw). Warum Du allerdings von „li“ gesprochen hast, obwohl Du das nicht verwendest, verstehe ich nicht.
Im „.navi li“ stand float:left. Das heißt, alles nebeneinander.
Aber auch mit dem jetzt geposteten HTML-Code hast Du natürlich alle Links nebeneinander, weil Du nur Anchor verwendest, das sind Inline-Elemente und die sind nunmal nebeneinander.
Dein Code passt nicht zu Deinen Aussagen und nicht zu Deinem Stylesheet. Bringe da bitte Ordnung rein und wenn dann immer noch etwas nicht geht, lad die Seite hoch und gib uns den Link.
Korrekt währe Untereinander angeordnet und alle Hintergründe
gleich lang.
Korrekt ist alles nebeneinander, weil Du lauter Inline-Elemente hast.
Bei mir schon (FF 2.0.0.12/Linux), und zwar weil die 150px bei normalgroßer Schrift bei mir zu kurz sind. Also werden aus dem langen Link zwei Zeilen und das Hintergundbild kommt zweimal. Versuch mal, bei dir die Schrift zu vergrößern, dann kriegst du das vielleicht auch.
Vorab: wenn Du solche Grafiken machst, dann geh bei einem Farbverlauf möglichst bald in die Endfarbe über. In deinem Fall ist zu lange Grau bis endlich mal Schwarz kommt! Das führt gerade bei kleiner Schrift beim hovern des Links zu einem schwarzen Balken.
Ich kann dir ganz genau sagen was der Fehler ist: Die Hintergrundgrafik ist nicht hoch genug. Wenn der Link bzw. dessen Schriftgröße also größer ist als die Grafik, wird die sie einfach gekachelt. Was Du also als grauen Balken siehst, ist in Wahrheit schon wieder der Anfang der Grafik.
Wie behebt man das? Ich würde - von besserem Quellcode mal abgesehen - entweder die Grafik höher machen, oder besser, den Hintergrund des Link schwarz machen, so wie eben der untere bereich der Grafik. Außerdem würde ich beim letzterem das automatische kacheln nur auf der X-Achse (horizontal) erlauben:
