ich sehe den Sinn des
<span>
-Elementes nicht.
Ich habe eine 200px x 66px Button Grafik. Diese besteht aus 3 Buttons a 200px x 22px.
Da aber nicht jeder Button auf der Webseite 200px breit ist, wurde die Hintergrundgrafik des <a> Elements nach rechts ausgerichtet mit den 20px Abstand für die rechte Rundung und Verzierungen.
Die Hintergrundgrafik des <span> Elements ist jedoch nach Links ausgerichtet und zeigt mit 12px Abstand die linke Rundung des Buttons.
Danach habe ich das <a> Element nach rechts eingerückt (margin-left: 12px) und das <span>Element etwas nach Links vorgezogen (margin-left: -12px).
Optisch sorgt das dafür das beide Ende des Buttons sichtbar sind obwohl der Button kleiner als 200px ist. Dummerweise spinnt aber der IE deshalb beim :active rum.