Heute mal wieder was Technisches.
Firefox hat eine neue Version herausgebracht, und irgendwas haben sie geändert, das das Design von fernsehlexikon.de zerstört.
Das Design mit den drei gleichlangen, farbig hinterlegten Spalten beruht auf dem bis gestern wunderbar problemlosen Three-Column Layout von A List Apart. Bis Firefox 2.0.0.7 funktionierte alles, in anderen Browsern läuft’s auch. Nur Firefox 2.0.0.8 zickt.
Es liegt offenbar nicht speziell an fernsehlexikon.de; sämtliche Layouts, die auf dem Three-Column-Layout-Trick basieren, scheinen nicht mehr zu funktionieren.
Hat jemand eine Idee?
Links: IE (richtig). Rechts: Firefox 2.0.0.8 (falsch)
Schwer zu sagen, woran dies genau liegt. Umso schwerer wird es immer, wenn eine Seite (wie in diesem Fall das Fernsehlexikon) nicht w3c-kompatibel ist und sehr viele inhaltliche und strukturelle Fehler enthält.
Ein Browser frisst Blogdesign? Da stecken bestimmt Journalisten dahinter, diese ewig gestrigen, ignoranten Werbehuren!
Oh Gott, inhaltliche Fehler bestrafen neue Browser auch?
Naja, irgendwie muss es an dem Trick liegen, dass der farbige Hintergrund der linken und rechten Spalte der breite Rahmen der mittleren Spalte ist, und die Spalten selbst auf diesem Rahmen floaten. (Oder so.)
Das ist für mich kein neues Phänomen. Ich benutze Mozilla und das war schon immer so (naja kann sein, dass das am Anfang mal funktionierte, jedenfalls schon sehr lange).
Mit STRG+A alles markieren schafft da für den frustrierten Leser immerhin kurzfristig Abhilfe.
Ich würde spekulieren, dass Mozilla da irgendein „Feature“ aus der „Vollversion“ nach Firefox übertragen hat.
Schon mal versucht den einzelnen Boxen, also #content, #center, und #right eigenen Hintergrund zu geben? Scheint ja so als ob sich das Problem nur auf #container bezieht. Also Background splitten und auf die drei Boxen verteilen.
Wenn das Problem wirklich so weit verbreitet ist kann man sich bestimmt bald auf einen offiziellen Fix einstellen …
Die Boxen sind ja unterschiedlich hoch, das ist das Problem. Sie wären nicht bis unten ausgefüllt mit dem Hintergrund. (Gerade das hat der Trick von A List Apart ja so elegant und simpel gelöst.)
Klar. Hätt mir auch aufallen müssen *g*.
Ich schau es mir noch mal genauer an. Ich fand diese Rail Methode schon immer ein wenig komisch. Hab ich noch nie eigesetzt …
Einfach eine Box rechts floaten, eine links, der mittleren dann passenden margin nach rechts und links geben, ordentlich clearen und schon hat man es. Dann muss man auch nicht dem umschließenden Container mit komischen Angaben verpassen.
Schon mal einen Blick auf YAML geworfen? Da hat man ein wirklich stabiles drei Spalten Layout.
Übergangsweise würde ich das über den body Hintergrund lösen.
2000px breit, den jetzigen Hintergrund kacheln und da rein schmeißen, in die Mitte den Blog Hintergrund. Das ganze als gif speichern und zentriert als body Hintergrund setzten.
Ist zwar nicht gerade sauber gelöst aber immerhin besser als das Jetzige.
Gibt man dem div ‚container‘ ein fixe Höhe, sind die Ränder und sein Hintergrund wieder sichtbar. So wie es jetzt ist, ragt der container zwar auch bis unten, aber komischerweise sind Hintergrund und Ränder nicht sichtbar. Dubios. Der Container hat die gleichen Ausmaße, aber nur mit fixer Höhe werden Ränder und Hintergrundfarbe angezeigt.
War mal so frei das Ganze zu bauen: Klick mich.
Das einfach via
body background { url(url/zum/bild/body_bg.gif) top center repeat-y }
einbauen.
Quatsch.
body { background: url(url/zum/bild/body_bg.gif) top center repeat-y }
Achso, und nebenbei:
Die Anwaltskanzlei Dozier Attorneys könnte nicht so einfach nach Hilfe fragen, denn niemand darf den Quellcode ihrer Internetseite anschauen.
http://www.golem.de/0710/55520.html
Die „Fehler-Konsole“ (unter „Extras„) des Firefox 2.0.0.8 sagt:
Warnung: Farbe erwartet, aber ‚border-left‘ gefunden. Fehler beim Verarbeiten des Wertes für Eigenschaft ‚background‘. Deklaration ignoriert.
Quelldatei: http://www.fernsehlexikon.de/
Zeile: 17
Warnung: Unbekannte Eigenschaft ‚cellpadding‘. Deklaration ignoriert.
Quelldatei: http://www.fernsehlexikon.de/wp-content/themes/neu/style.css
Zeile: 408
Diesen Effekt hatte ich bis vor einiger Zeit auch, jedoch mit einer älteren Firefox-Version. Ich weiß nicht mehr, welche, jedenfalls war sie kleiner als 2.0.0.7
„IE (richtig) – Firefox (falsch)“
Wie konnte das nur passieren! ;)
http://blog.highresolution.info/index.php?/highresolution/comments/firefox_2008_float_containing_clearing_bug/
Viele Grüße!
Das wäre schön, wenn Browser auch schlechten Inhalt ablehnen würden ;o) Ich meinte damit falsche Werte und Attribute.
Kümmert sich ja leider kaum jemand darum, dass der Code auch syntaktisch richtig ist *jammer*
[…] Niggemeyer zerschießt es das Layout, und – klar – Dirk Jesse (YAML) weiß, warum: Auslöser sind floatende Boxen mit […]
@Alexander: Tadaaa! http://validator.w3.org/check?uri=http%3A%2F%2Ffernsehlexikon.de%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.fernsehlexikon.de&warning=1&profile=css21&usermedium=all
Ja ja. Jajajaja.
Oops, sorry :-|
Nein, ist schon recht. Ich war nur so stolz, dass das HTML jetzt valide ist.
Ich hab für mein Blog fast das selbe Design wie fernsehlexikon.de und bei mir funzt das auch mit Firefox 2.0.0.8
Vielleicht mat Firefox beschlossen, dass es Zeit ist für ein neues Design ^^ und deshalb sich weigert das aktuelle richtige anzuzeigen.
Ich stör nochmal :) Hier gibts Tools zum runterladen, die HTML nach logischen Fehlern und Speicherlecks. Hier der Link: http://www.peganza.com
Speicherlecks in HTML, haaaaaaahaaaaaa.
[…] ist und ihn deshalb ausblendet. Man weiß es nicht. Stefan Niggemeier vermutet in seinem Blog: Oh Gott, inhaltliche Fehler bestrafen neue Browser […]
Errinnert eigentlich nur mich „Three Column Layout Trick“ and „Drei Schritt Herz-Pressur Explosions Technik“?
also ich weiß ja nicht, entweder wurde in der zwischenzeit was repariert, aber bei mir sieht die seite mit 2.0.0.8 so aus wie immer bzw. oben links – also richtig.
ja, ich hab inzwischen den reparaturvorschlag von tobias (#10/11) umgesetzt. muss ich noch nachtragen.
Firefox Blocken, oder einfach fuer den mozilla browser den hintergund anders angeben
Oder mit flock surfen (flock.com)
Die einfachste Lösung ist sicherlich einfach nicht auf 2.0.0.8 upzudaten.
Also bei stimmt das Layout der Seite auch im FF 2.0.0.8.
[…] ein Detail, zu verändern, das eine Reihe von Webseiten in Mitleidenschaft ziehen wird. Stefan Niggemeier beobachtet dies bei seinem Fernsehlexikon. Und auch Dirk Jesse, der jede neuen Browserversion […]
[…] hat nicht nur Stefan Niggemeier das Problem: “ Firefox 2.0.0.8 frisst Blog-Design“. Heute besuche ich ReadersEdition und stelle fest, dass mein Firefox ( Version 2.0.0.8 ) […]
Hier kommt’s her:
http://blog.highresolution.info/index.php?/highresolution/comments/firefox_2008_float_containing_clearing_bug/
http://www.pro-linux.de/news/2007/11891.html
FIREFOX hat bestimmt keine neue Version herausgebracht.
Etwas journalistische Genauigkeit kann man ja wohl erwarten, oder? ;-)
Also bei mir sieht alles richtig aus, falls euch das weiter hilft. (Firefox 2.0.0.8 auf Linux).
Gruß,
Stephan
Ich nutze dieses Layout auch (abgewandelt) und habe bei Firefox 2.0.0.8 keinerlei Probleme. Weder bei meiner Seite, noch bei einer anderen…
Hey Stefan,
gerade gesehen das du meine Lösung verwendest. Gegebenenfalls im Beitrag nachtragen sonst schreibt hier jeder das es wieder geht ;-).
Die Jungs von Mozilla haben mittlerweile auch schon bemerkt das da was nicht stimmt. Firefox 2.0.0.9 wird wohl im laufe der nächsten Wochen erscheinen.
Ich würde dir raten das du, so bald das Update draußen ist, wieder auf die alte Methode wechselst. Meine ist nicht nur unschön gelöst sondern auch nicht weitreichend getestet. Kann also Kollateralschaden verursachen.
Gruß
Tobias
Leider sind die ganzen Browser nicht in der Lage immer alle Seiten so anzuzeigen wie der Webmaster es wollte. Es ist schon ein Wahnsinn, beim testen einer Programmierung wieder einmal feststellen zu müssen: dass sieht im IE aber anders aus, das kann der FF aber nicht, im Opera werden komische Texte eingeblendet, usw. Das nervt wirklich.
Die Probleme gibt es heute auch noch, jeder browser zeigt was anderes.