Was macht FF bei STRG-F5?

[mbr]

Hallo Forum,
ich war gerade dabei, eine Testdatei zum verdeutlichen eines CSS Problems zu erstellen, als mir der seltsame Effekt von STRG-F5 aufgefallen ist...

Aber der Reihe nach: ursprünglich geht es um diese Schachseite auf meiner homepage. Wenn man auf den Button > drückt, wird ein Zug ausgeführt. Dabei "springt" beim ersten mal das Layout minimal. Mich interessierte nun, warum dies so ist.

Da die Seite allerdings recht komplex ist (PHP wird fuer den seitenaufbau verwendet, das "Spielbrett" wird mit Javascript erzeugt, mit CSS formatiert usw...) und ich euch nicht zumuten wollte, euch durch hunderte von Zeilen Quellcode zu quälen - der vermutlich eh größtenteils irrelevant ist - habe ich dieses Testbeispiel konstruiert, welches das Problem hoffentlich auf das nötigste runterbricht.

Und jetzt kommt der Punkt: wenn ich auf dieser Beispielseite STRG-F5 drücke, wird die Seite wie gewünscht angezeigt. Sobald ich dann aber nochmals "normal" mit F5 aktualisiere(oder über den aktualisieren Button, oder über das Kontext Menü) ist die Seite wieder "kaputt". Weiss jemand was genau bei STRG-F5 passiert? Bin bisher bei Google nicht wirklich fündig geworden. Für den IE steht dort, dass STRG-F5 einen reload der Seite erzwingt, selbst wenn es noch eine gültige gecashte Version gibt. Gilt das auch für den FF?

Und was mich brennend interessiert: Was hat das mit meinem Problem (Fehler?) zu tun?

Liebe Grüße mbr

[Matze]

Hallo!

Für den IE steht dort, dass STRG-F5 einen reload der Seite erzwingt, selbst wenn es noch eine gültige gecashte Version gibt. Gilt das auch für den FF?

Ja, mit Strg+F5 lädst du die Seite neu vom Server, mit F5 versucht der Browser zunächst die Seite mit den gecachten Daten wieder zu laden.

Und was mich brennend interessiert: Was hat das mit meinem Problem (Fehler?) zu tun?

Keine Ahnung, ich vermute gar nichts.

Grüße, Matze

[Timo "God's Boss" Reitz]

Ich habe mir dein Beispiel im Firefox angeschaut und bin ihm mit DOM Inspector und Edit CSS zu Leibe gerückt. Leider muss ich gestehen, dass mir das Verhalten des Firefox hier ein Rätsel ist. Obwohl alle Angaben sagen, dass die Tabellenzellen unten 50 Pixel hoch sein sollen, sind sie 52 Pixel hoch (jeweils eine Pixelreihe über und unter dem Bild, wegen vertical-align:middle;). Allerdings - wie du ja schon mitteiltest, erst nach einem Reload. Ich habe noch einen weiteren Test gemacht, mit Edit CSS. Ich habe dem Bild ein display:none; gegeben und sofort wieder entfernt - voilà, die Zellen waren nur noch 50 Pixel hoch, bis zum erneuten Reload.
Mir selbst ist sowas aber auch schon irgendwann mal passiert, eine Seite im Firefox, die nach Reload ein wenig anders aussah, obwohl sich nichts ändert.

Und was mich brennend interessiert: Was hat das mit meinem Problem (Fehler?) zu tun?

Keine Ahnung. Vielleicht kann man dazu was auf Bugzilla at Mozilla finden, aber versprechen kann ich das logischerweise nicht.

[ruben]

Ich habe mir dein Beispiel im Firefox angeschaut und bin ihm mit DOM Inspector und Edit CSS zu Leibe gerückt. Leider muss ich gestehen, dass mir das Verhalten des Firefox hier ein Rätsel ist. Obwohl alle Angaben sagen, dass die Tabellenzellen unten 50 Pixel hoch sein sollen, sind sie 52 Pixel hoch (jeweils eine Pixelreihe über und unter dem Bild, wegen vertical-align:middle;). Allerdings - wie du ja schon mitteiltest, erst nach einem Reload. Ich habe noch einen weiteren Test gemacht, mit Edit CSS. Ich habe dem Bild ein display:none; gegeben und sofort wieder entfernt - voilà, die Zellen waren nur noch 50 Pixel hoch, bis zum erneuten Reload.

vertical-align + Bild + komische Größe? Da klingelt bei mir "descender space". Bilder sind an der Text-Baseline ausgerichtet und Buchstaben wie j, g etc. brauchen ja noch Platz nach unten. Dein Bild ist genau 50 Pixel hoch, also wird es daran liegen. Normalerweise behebt man das glaub ich mit vertical-align:bottom falls das keine Option ist, mach doch einfach dein Bild kleiner hat doch eh viel transparenten Rand.
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
Dieser Artikel erklärt das nochmal, vllt. sogar FF bezüglich (ich denke aber, das Problem wirst du auch anderswo haben, außer vllt. im IE, der ist ja manchmal sehr "zuvorkommend".)

[Timo "God's Boss" Reitz]

vertical-align + Bild + komische Größe? Da klingelt bei mir "descender space". Bilder sind an der Text-Baseline ausgerichtet und Buchstaben wie j, g etc. brauchen ja noch Platz nach unten.

Sollte das nicht irrelevant sein, wenn dort keine Textdaten (nicht einmal Whitespace) sind und line-height:0 gilt?

Dein Bild ist genau 50 Pixel hoch, also wird es daran liegen. Normalerweise behebt man das glaub ich mit vertical-align:bottom falls das keine Option ist, mach doch einfach dein Bild kleiner hat doch eh viel transparenten Rand.

Es ist nicht mein Bild. ;-)

http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
Dieser Artikel erklärt das nochmal, vllt. sogar FF bezüglich (ich denke aber, das Problem wirst du auch anderswo haben, außer vllt. im IE, der ist ja manchmal sehr "zuvorkommend".)

Ich habe den Artikel mal überflogen. M.E. ist gar nicht das Kuriose, dass dort Zwischenräume sind, denn das könnte man ja sicher noch irgendwie erklären (ich nehme an, der Artikel tut es). Aber warum verändert sich die Seite, wenn man sie neu lädt? Warum verändert sie sich, wenn man das CSS im laufenden Betrieb ändert und wieder auf den Ursprungswert setzt? Das erscheint mir als der eigentliche Fehler!

[mbr]

Hallo, Forum
vielen Dank für die tatkräftige Hilfe. Ich habe das Problem jetzt mit dem zweiten Tip von Ruben ("mach doch einfach dein Bild kleiner hat doch eh viel transparenten Rand") gelöst. Hatte zwar vorher auch schon mal probiert, die Bilder einfach als 45 X 45 px darzustellen, aber aus irgendeinen Grund hatte das damals keinen Effekt. Wahrscheinlich habe ich eine der drei Stellen (1 X CSS und 2 X Javascript), die ich anpassen mußte übersehen.

Ja, auf jeden Fall funktioniert es jetzt (ist noch nicht hochgeladen, aber das kommt in den nächsten Tagen).

Danke übrigens Ruben, für deinen Hinweis zum IE. Damit habe ich jetzt eine neue Baustelle, die wahrscheinlich noch umfangreicher ist als die alte... Der IE6 (und IE7) stellt nicht nur das Spielfeld falsch dar, nein, man kann gar nicht ziehen (kommt immer eine alert-box, dass der Zug nicht möglich wäre). Da ich die gesamte Seite selbst erstellt habe, weiss ich, an welcher Stelle dieser alert auftauchen sollte und wann nicht. Witzig ist nur, dass es anscheinend ein logischer Fehler ist. Über die Syntax hat der IE sich nicht beschwert. Er macht nur einfach nicht das, was ich erwarte ;-(

Ein bisschen wurmt es mich schon, dass ich nicht genau rausfinden konnte, wo denn nun das CSS Problem lag (liegt?), denn die Unterlängen hatte ich ja ausgeschlossen. Aus gutem Grund hatte ich die line-height auf 0 gesetzt und die Bilder auf display:block gestellt. Nichteinmal das overflow:hidden für die tds hat etwas gebracht ...

Nuja, wie gesagt: es funktioniert nun. Vielen Dank nochmals. Euch allen erstmal einen wunderschönen Abend und eine angenehme Nacht.

liebe Grüße mbr