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.

[Gernot Back]

Hallo Kai345,

[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.

Da ich bei deinem Flaggen-Sprite gar keine unterschiedlichen Formate sehen kann (selbst die Schweizer Flagge hat da dasselbe Längen-zu-Breiten-Verhältnis wie alle anderen, was ja eigentlich falsch ist) fragt man sich schon, warum du den Sprite nicht einfach so, wie es üblich ist, als unterschiedlich zu positionierendes Hintergrundbild direkt dem BUTTON-Element zuweist und das ganze Gedöns mit den SPAN- und IMG-Elementen weglässt.

Gruß Gernot

[Matthias Apsel]

Om nah hoo pez nyeetz, Gernot Back!

... fragt man sich schon, warum du den Sprite nicht einfach so, wie es üblich ist, als unterschiedlich zu positionierendes Hintergrundbild ...

Aus Gründen der Berücksichtigung einiger nicht aktueller aber nicht vernachlässigbarer Browser IE7/8, FF3 ...

siehe auch ff.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

Da ich bei deinem Flaggen-Sprite gar keine unterschiedlichen Formate sehen kann (selbst die Schweizer Flagge hat da dasselbe Längen-zu-Breiten-Verhältnis wie alle anderen, was ja eigentlich falsch ist)

Klar, aber alles Andere wäre enorm aufwendig.Es gibt einfach zu viele Maß-Verhältnisse, auch wenn mit 2:3, 1:2 und 3:5 die meisten Flaggen abgedeckt wären, aber eben noch lange nicht alle. Zum Einen müßte ich zu jeder einzelnen Flagge das Verhältnis oder die Pixel-Maße mitspeichern, was zusätzliche Dateigröße und Speicherverbrauch bedeutet und hätte zum Anderen extreme Probleme, die jeweils korrekten Koordinaten in der Grafik zu bestimmen (de facto liefe es darauf hinaus, für jede Flagge sämtliche "davor" liegenden Datensätze abzurufen und die Werte zu addieren. In Javascript würde dies das Programm einfach zu sehr verlangsamen. Von der aufwendigeren Grafik-Erstellung mal ganz abgesehen.

fragt man sich schon, warum du den Sprite nicht einfach so, wie es üblich ist, als unterschiedlich zu positionierendes Hintergrundbild direkt dem BUTTON-Element zuweist und das ganze Gedöns mit den SPAN- und IMG-Elementen weglässt.

Hatte ich mal. Aber weil ich diverse Flaggen-Größen benötige und Browser skalierende Hintergründe wohl noch lange nicht „flächendeckend“ beherrschen, mußte ich das ändern (oder hätte für jede Größe eine eigene Grafik, was zusätzliche Requests und Ladezeit bedeutet).

Siehe auch den Sub-Thread, auf den Matthias bereits verwiesen hat.

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

[Matthias Apsel]

Om nah hoo pez nyeetz, Kai345!

Da ich bei deinem Flaggen-Sprite gar keine unterschiedlichen Formate sehen kann (selbst die Schweizer Flagge hat da dasselbe Längen-zu-Breiten-Verhältnis wie alle anderen, was ja eigentlich falsch ist)

Klar, aber alles Andere wäre enorm aufwendig.

Du könntest die Spritegrafik bearbeiten, sodass zum Beispiel die Schweizer Flagge 85 x 85 groß ist und links und rechts ein weißer Rand. Dann hättest du zumindest die Seitenverhältnisse berücksichtigt. (Hast du eigentlich Nepal dabei?)

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

Du könntest die Spritegrafik bearbeiten, sodass zum Beispiel die Schweizer Flagge 85 x 85 groß ist und links und rechts ein weißer Rand. Dann hättest du zumindest die Seitenverhältnisse berücksichtigt.

Und dann kommt jemand und sagt "Heeh, die Schweizer Flagge hat links und rechts keine weißen Streifen" :) Wenn ich das mache (was ich durchaus erwogen habe), würde bei manchen Flaggen nicht immer klar sein, was Flagge und was Füllung ist. Dann müßte ich es transpirierend .. äh transparent ausführen und den Hintergrund durchscheinen lassen. Ob das dann gut aussieht, müßte ich erst mal testen. Und ganz ehrlich - die Flagge ist ja nun wirklich nicht so stark verzerrt, daß es der Erkennung abträglich wäre.

Ist nur ein Quiz. Wer Flaggen sehen will, muß das halt anderswo machen :) Ich hab ohnehin wegen des eigentlichen Problems mit der Verschiebung, das ich seit Wochen nicht in den Griff bekomme, gerade nicht wirklich mehr Lust, überhaupt noch was dran zu tun.

(Hast du eigentlich Nepal dabei?)

Sicher doch. GOTO Griechenland und dann senkrecht nach unten, da ist Nepal :)

Dort habe ich es ähnlich gelöst wie du oben angesprochen hast - nur zusätzlich etwas in der Breite gestreckt und den Rest links und rechts aufgefüllt. Gefällt mir nicht sonderlich. Ich habe es mit dem Originalverhältnis versucht, sieht zu verloren aus (da die 85px Höhe gehalten werden sollen). Habe es mit Vollstreckung der Breite versucht, ist aber zu verzerrt. Also kam dieser nicht schöne Kompromiss dabei heraus. Egal.

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

[Matthias Apsel]

Om nah hoo pez nyeetz, Kai345!

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)

nicht ganz ;-)

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.

Vielleicht liegt es daran, dass Buttons ihre Gestaltung unmittelbar aus dem Browser beziehen also grundsätzlich schon unterschiedlich aussehen. Sie sperren sich auch gern gegen bestimmte CSS-Formatierungen, zwar nicht so sehr wie die Checkboxen ...

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.

Böse Idee: Verweise sind semantisch nah dran, sie dürfen ein coord-Attribut haben, welches in deinem Fall dem value ziemlich nahe kommt. Dies ist zudem #cdata, also darf man zumindest beliebigen Text reinschreiben.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

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)

nicht ganz ;-)

Grrr.. selbst in dieser Vergrößerung hat es eine Weile gedauert, bis ich's gesehen habe -> zu vernachlässigen. Und da ohnehin noch eine Border um das Flaggenbild liegt, dürfte es gar nicht mehr auffallen.

Sie sperren sich auch gern gegen bestimmte CSS-Formatierungen, [...]

Anders kann ich es mir auch kaum noch erklären. Es scheint hier tatsächlich Werte zu geben, die ich einfach nicht überschrieben bekomme.

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.

Böse Idee: Verweise sind semantisch nah dran, sie dürfen ein coord-Attribut haben, welches in deinem Fall dem value ziemlich nahe kommt. Dies ist zudem #cdata, also darf man zumindest beliebigen Text reinschreiben.

Oh, das ist wirklich sehr böse :) Muß ich mal testen.

Schade, ich hätte natürlich lieber Elemente gehabt, die direkt in der .elements-Collection des Formulars enthalten sind (nur deshalb ist es übrigens verwendet worden), um nicht -zig verschiedene Zugriff-Arten verwenden zu müssen, aber das ist nicht wirklich entscheidend.

Bliebe nur die Frage, ob das Attribut abseits seiner tatsächlichen Bestimmung auch wirklich von den Browsern ignoriert wird.

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