Internet Explorer und Stylesheets - das alte Lied
Ich bin vorhin, so wie ich es halt alle paar Wochen ohnehin mal tue, testweise mit dem IE über den Blog hier gewandert und dachte, mich tritt was.
Ich hatte vor einigen Wochen einen ekeligen Fehler entdeckt, der im IE bis zur Version 6 dafür sorgte, dass auf ziemlich vielen Unterseiten von blocati das Menü nicht rechts sondern unterhalb des Contents angezeigt wurde. Gut ok, ich weiß, dass ich hier die Ausrichtung auf eine Art und Weise vornehme, wie sie in der Regel nicht empfohlen wird: den Content richte ich per float:left und die Sidebar per float:right aus. Das funktioniert in allen vernünftigen Browsern (also die, die CSS richtig interpretieren) auch völlig korrekt, selbst im aktuellen IE 7 sind die uralten Kinderkrankheiten endlich behoben. Nur die früheren Internet Explorer machen da ganz gerne, worauf sie gerade Lust haben. Der Grund dafür ist eine fehlerhafte Implementierung des Box-Modells in den älteren IE-Versionen und daraus resultierend falsche Werte für Breiten und Höhen diverser Boxen (meist div-Bereiche). Der Internet Explorer bis Version 6 war halt der Meinung, dass der Content breiter sein müßte, als eigentlich definiert. Das Ergebnis war dann Dank der Float-Eigenschaften von Content und Sidebar, dass diese sich in den älteren IEs überlagert hätten und deshalb wurde die Sidebar runtergeschoben. Gut, den Bug hatte ich dann irgendwann gefixt und bis auf minimale Unterschiede in dem kleinen Freiraum zwischen Content und Sidebar kamen die älteren IE-Varianten damit klar. Letzteres hätte man über eine Browserweiche (wahlweise im CSS oder als html-Kommentar mgl.) auch noch ausbessern können, aber darauf verzichtete ich. Ursprünglich hatte ich das so, wie allgemein üblich mit einem float:left; für den Content-Bereich und einem entsprechenden margin für die Sidebar geregelt, aber irgendwie funktioniert auch das nicht immer so, wie es soll - deshalb die doppelte float-Variante …
Nun gut, wochenlang war alles bestens und auch die Besucherzahlen stiegen erwartungsgemäß wieder etwas - der Bug dürfte zuvor immerhin mindestens 30% der User für einige Wochen etwas verwirrt haben 
In den Stats der letzten paar Tage fiel mir aber auf, dass die Userzahlen trotz reichlich neuem Content und einiger kleiner Optimierungen erneut rückläufig waren und das machte mich stutzig. Also wie erwähnt meinen IE (Version 6.x) gestartet und siehe da - das Menü war schon wieder in vielen Unterseiten (selbstredend nicht in allen 
) nach unten gerutscht. An dem Ding hatte ich dann vorhin auch einige Stunden zu knabbern, weil ich den Grund ewig nicht nachvollziehen konnte. Unzählige Breitenanpassungen und Tests später hatte ich dann endlich den Ãœbeltäter: am letzten Wochenende hatte ich, um in einzelnen Posts ohne viel Text mehrere Grafiken vernünftig ausrichten zu können, eine Tabellendefinition in den Stylesheet aufgenommen. Rein vom Prinzip her kann man Grafiken problemlos per float ausrichten - steht jedoch nicht genügend Text außenherum, dann fangen die Grafiken an, sich auch in andere Bereiche (teilweise inkl. Ãœberlagerungseffekten) reinzuschieben und man bekommt auch den jeweils zugehörigen Text nicht vernünftig ausgerichtet. Zu allem überfluß gibt’s selbstredend auch dabei wieder Unterschiede zwischen den Browser-Versionen und um derartiges mit reinem css hinzubekommen, hat man eine Weile zu fummeln. Da sind mir die guten alten tables halt doch lieber 
Drei mal dürft ihr raten, wo da jetzt das Problem lag … Genau, ich hatte im css selbstredend per width eine Breite für table definiert und das ganze nicht für bestimmte Bereiche eingegrenzt, weil ich irgendwie nicht mehr daran gedacht hatte, dass die in älteren Artikeln angezeigte Googlesuche in der Sidebar auch per Tabellen aufgebaut wird. Dort lag auch der Hase begraben. Wärend der Firefox (und der IE7) die Tabelle nicht breiter werden ließen, als es der umschließende div zuläßt (logisch, übergeordnetes MUSS Vorrang haben), sahen die älteren IEs diese Angelegenheit ganz anders. Da wurde die Tabelle im Menü kurzerhand mit der im css definierten Breite angelegt und der übergeordnete div wurde eben einfach rigoros verbreitert. Letztendlich genügte es, vor die Tabellendefinition im css noch ein #content einzufügen. Na wenigstens habe ich bei der Gelegenheit auch noch mal einige andere Sachen im css optimiert und den Seitenquelltext damit auch noch mal geringfügig verkleinert 
Das war dann mal wieder eine Episode aus der (hier im Blog nicht vorhandenen) Kategorie “wer keine Arbeit hat, der macht sich welche”
Am 6. July 2007 um 16:52 Uhr
Öhm, ja. Sollen halt die Leute vernünftige Browser benutzen