Verschiebung in Firefox und Sfari

[Kai345]

[latex]Mae  govannen![/latex]

Sooo, nachdem ich nun seit Tagen erfolglos selber bastele, brauche ich einen Profi.

Ich habe ein Quiz, das u.A. auch Flaggen als Antwort-Vorgaben anbietet. Jede Flagge wird dabei mit Javascript in ein Button-Element geschrieben[1]. Dabei kommt es sowohl in Safari 5 wie auch Firefox 3 & 4 zu einer sehr unschönen Verschiebung von mehreren Pixeln nach rechts und unten. Opera, Chrome, IE8 zeigen es wie gewünscht an. (5 Flaggen erste Reihe)

Ersetze ich jedoch lediglich das button-Element durch ein Anderes, beispielsweise div, stimmt die Anzeige bei ansonsten absolut gleichem Markup, CSS und Javascript. (5 Flaggen zweite Reihe)

Es scheint also irgendetwas mit dem button-Element selbst zu tun haben, allerdings konnte ich weder in Safari noch FF in den Entwicklertools den entscheidenden Unterschied finden.

Ich möchte allerdings button-Elemente verwenden, weil divs als Antwort-Vorgaben semantisch unsinnig sind und um einen vorgegebenen Wert per value-Attribut definieren zu können.

Minimales[2] Online-Beispiel

Noch Fragen? Schreiben!

Stur lächeln und winken, Männer!
Kai

[1] In jedes Button-Element wird ein span_Element geschrieben, welches wiederum das eigentliche Flaggen-Bild als img_Element enthält. Per margin-left und margin-top wird dann nur die gewünschte Flagge angezeigt. Ich beschränke mich im Beispiel auf die ursprüngliche Größe von w:h 128px:85px, diverse Werte werden im Quiz -anders als im Beispiel- dynamisch errechnet und das Flaggen-Bild per width und height-Attribut skaliert, um verschiedene Flaggen-Größen zu realisieren. Das nur zur Erklärung der Javascript-Funktionen; sollte aber nichts mit dem Problem zu tun haben.

[2] Da ich alle Elemente, die nichts mit dem Problem zu tun haben, aus dem Original-Quelltext entfernt habe, entsteht teilweise eine unsinnig verschachtelt erscheinende Markup-Struktur.