Menüleiste: Grafikgröße wird nicht übernommen

Hallo zusammen,

ich habe folgendes Problem:

Ich definiere in der header.php eine Menüleiste über

<div id="subnavbar">
<ul id="subnav">

<li class="rot"><a href="x" ></a></li>
<li class="gruen"><a href="y" ></a></li>
...
</ul>
</div>

wenn ich nun in meiner Style.css definiere

#subnavbar {
background: #666666;
width: 960px;
height: 30px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;

margin: 0px;
padding: 0px;
}

#subnav li.rot a, #subnav li.rot a:link, #subnav li.rot a:visited {

background: #FFFFFF url(images/xyz.gif);
width: 130px;
margin: 0px;
padding: 0px;
}

So wird das Bild xyz.gif trotzdem nicht in seinen vollen 130px angezeigt.

Was mache ich falsch?

Danke für die Hilfe!

Das Problem dabei ist dass ich für jedes #subnav li.xyz eine andere Grafikbreite habe..

Über css gehe ich hier weil ich zudem bei #subnav li.xyz a:hover, #subnav li.rot a:active eine andere Grafik anzeigen lassen will (aber je Menüpunkt mit der gleichen Breite), vielleicht gibt es hier auch eine Alternativlösung?

patsy: Dein Vorschlag hilft übrigens leider nicht, trotzdem Danke..

Sonst jemand eine Idee wie ich das pro Menüpunkt individuell lösen kann?

Den IE 6.0? Sollte aber eine Lösung für möglichst alle Browser sein.. thx!

Hat sonst noch jemand eine Idee woran es liegen könnte?

Danke!