display: block;
sowie
overflow: hidden;
fehlen auf die span-Elemente btw :) sonst mags der ie6 nicht
und wenn ich jetzt eine grafik habe die nicht 10 pixel breit ist sondern 25 dann muss ich die ganzen styles nochmal machen und für 25px anpassen.
Warum lässt du das Ding nicht durch ein Script generieren?
Bei jeglicher Runde-Ecken-Technik mit CSS hast du aber dasselbe Problem - ob du musst irgendwas im CSS an die Rahmedicke anpassen - sei es nun ein padding, wenn du mit dem Klassiker (2 bzw 4 Hintergrundbilder arbeitest) oder eben diese Lösung.
Du kannst aber gerne bei deiner extrem unübersichtlichen Tabellenwurst bleiben :)
außerdem benützt du einige negativ coordinaten, wehalb ich dort wo ich die box verwende dann auch auzfpassen muss das ich den rand richtig beachte.
.box {
margin: 10px;
}
problem gelöst - damit fällt das Aufpassen weg.