nicht angemeldet
Hast du sonst noch etwas verändert`?
Ja, ich habe nicht aufgepasst und mitgedacht, als ich Deine Angaben in einen Testcase umgewandelt habe. ;)
Beim zweiten Versuch konnte ich dann Deine Probleme nachvollziehen.
Ich habe dann etwas rumgetestet und kam auf diese Fehlerquelle: Bei <button> kann Webkit offenbar nicht mit außerhalb der Box positionierten Floats umgehen. Das war mir dann doch neu. Externes Positionieren mit position: relative geht übrigens; allerdings hat relative ja immer das Problem, dass die Lücke an der originalen Position bleibt.
Ich rate Dir, dass Du einfache Deine die Hintergrundbilder tragenden Spans innerhalb des Buttons positionierst und dem Button den Rahmen und die Hintergrundfarbe weg nimmst.
Ich habe da mal ein Beispiel vorbereitet:
• Ich habe das linke und das rechte Span jeweils mit passendem border-radius ausgestattet; einfach weil ich keine passenden Hintergrundbilder zur Hand hatte. Du solltest die Angaben einfach ersetzen können.
• Alternativ zur Positionierung mit Floats könnte man sich auch das display:table-Modell vorstellen, aber Du willst ja auch Rücksicht auf minderwertige Browser nehmen.
• Und für minderwertige Browser solltest Du auch noch die nth-child-Pseudoklassen durch echte Klassen ersetzen.
Gunnar Bittersmann