Browser-Bugs
Donnerstag30. August 2007

Offensichtlich hat sich Chris Heilmann die Nacht um die Ohren geschlagen (oder auch nur ein paar Minuten davon) und heute morgen eine recht nette Lösung für YUI Grids und das immer wieder gern diskutierte Problem gleich langer Spalten gepostet. Der Ansatz gefällt mir. Man verzichtet auf das leidige CSS-Gehacke, welches je nach Komplexität des Layouts gelegentlich zu unerwarteten Nebeneffekten führen kann und überlässt die Sache Javascipt. Wer mehr zum Thema wissen möchte, Ed Eliot hat dazu vor einiger Zeit eine schöne Übersicht veröffentlicht.

Bei der Gelegenheit trifft es sich natürlich gut, dass sich der Aufwand innerhalb eines CSS-Frameworks mit bekannten Containerbezeichnungen sehr in Grenzen hält. Was sind nun die Vorteile? Erstens, das CSS-Gehacke entfällt vollständig. Zweitens diese Lösung funktioniert bei angeschaltetem Javascript auch in älteren Browsern - ein Punkt, bei dem CSS-Lösungen regelmäßig scheitern und drittens - wer Javascript ausgeschaltet hat, der bekommt die Seite dennoch in normalem Look & Feel, denn auch hier könnte man per min-height noch evlt. Probleme sehr leicht abfangen. Der einzige Aufwand der entsteht - man muss ein kleines Script in sein Layout einbauen.

Ehrlich, ich finde diesen Weg knuffig und und in Verbindung mit meinem geliebten jQuery auch für die YAML Subtemplates für vorstellbar.


Donnerstag12. April 2007

Firefox 2.x und der Internet Explorer 7 haben offensichtlich massive Probleme beim Ausdrucken von Containern mit den Eigenschaften overflow:hidden und overflow:auto. Gleiches gilt für den Internet Explorer 7 bei Verwendung der Eigenschaft overflow:auto. Der Inhalt des Containers läuft jeweils bereits in der Druckvorschau über den unteren Seitenrand hinaus und wird dann willkürlich abgeschnitten. Ein Umbruch der Inhalte auf eine neue Seite innerhalb des Containers findet nicht statt.

Statt dessen wird im Extremfall der gesamte Container auf eine neue Seite umgebrochen und die Inhalte am Ende dieser Seite abgeschnitten. Auf diese Weise entstehen unter Umständen auch noch große Leerräume bzw. komplett leere Seiten im Ausdruck. Ich habe einen kleinen Testcase eingerichtet, um das Nachvollziehen des Bugs in den beiden Browsern zu erleichtern. Schauen Sie sich den Testcase dazu einfach in der Druckvorschau an.

Die aktuellen Versionen des Opera und des Safari sind nicht von diesem Problem betroffen. Da ich die restlichen IE-Versionen derzeit leider nur als Standalone-Fassungen habe, konnte ich die älteren IE-Versionen leider nicht testen, da die Druckvorschau nur mit einer sauberen Installation funktioniert. Über entsprechende Berichte würde ich mich freuen ...


Freitag30. März 2007

Der Italics-Bug (IE5.x und IE6.0) ist einer der am wenigsten bekannten IE-Bugs und gleichzeitig einer der lästigsten Zeitgenossen, den man sich im Verlauf der Layouterstellung einfangen kann. Ist er erst einmal da, sorgt er für unplanmäßig um einige Pixel größere Containerbreiten und innerhalb von float-basierten Layouts aufgrund dessen nicht selten für Chaos. Der auf positioniseverything.net beschriebene Bugfix ist zwar wirksam, aber er muss dem jeweiligen Elternelement des Verursachers zugewiesen werden.

#parent_container {overflow:visible}

Die Indentifizierung des auslösenden Elementes ist innerhalb komplexer Layouts gelegentlich gar nicht so einfach, denn es reicht schon die Auszeichnung eines einzelnen Wortes mittels <em> oder <i>, um den Bug auszulösen. Das heisst, er wird in der Regel durch Inhalte ausgelöst, die während der Layouterstellung meist noch gar nicht da sind.  Es bedeutet weiterhin, dass der Bugfix in der Regel individuell angepasst werden muss. Und das kann eben recht mühsam sein.

Daher folgender Gedanke: Der Wert visible stellt für die überwiegende Mehrheit der HTML-Elemente den Standardwert dar und muss daher eigentlich nicht explizit vergeben werden. Auf der anderen Seite ist bei expliziter Vorgabe eines Standardwertes auch nicht mit störenden Nebenwirkungen zu rechnen. Beste Voraussetzungen also, um diesen Bugfix allgemeingültig zu formulieren.

* html body * { overflow:visible }
* html iframe, * html frame { overflow:auto }
* html frameset { overflow:hidden }

Mit der ersten Regel werden alle HTML-Elemente mit der Eigenschaft overflow:visible versorgt. Im Anschluss werden dann nur noch die Elemente iframe, frame und frameset (diese drei bilden die Ausnahme von der Regel) auf ihre Standardwerte zurückgesetzt. Und das war’s auch schon. Der Italics-Bug ist kein Thema mehr.

Diese drei Zeilen CSS solllten möglichst weit vorn im Stylesheet - auf alle Fälle vor Beginn der eigentlichen Layoutdefinitionen - eingefügt werden. Über * html werden automatisch nur die Versionen 5.x & 6.0 des Internet Explorers erfasst. Alle anderen Browser ignorieren diese CSS-Regel.

UPDATE 23.4.07: Der Selektor der ersten CSS-Regel * html * verursacht Schwierigkeiten im IE5.x, wodurch keine vertikalen Scrollbalken mehr angezeigt werden. Das Problem lässt sich beseitigen, in dem der Bugfix erst auf Elemente innerhalb von body angewendet wird. Der Selektor wurde daher zu * html body * erweitert.


Mittwoch01. November 2006

Dass der Internet Explorer beileibe nicht der einzige Browser mit CSS-Bugs ist, sollte sich langsam herumgesprochen haben. Diesmal hat es den Firefox 1.5 und 2.0 erwischt. Beide Versionen verweigern unter bestimmten Umständen das Verkleinern von Texten einer Webseite. Die Ursache für den Bug scheint im jeweils verwendeten Nutzerprofil zu liegen. Bei Verwendung älterer Nutzerprofile ist der Bug in der Regel aktiv. Dies betrifft die meisten Nutzer, die den Firefox schon seit einigen Versionen einsetzen. Mit einem frischen angelegten Nutzerprofil tritt der Bug hingegen nicht auf.

Ich habe einen entsprechenden Testcase gebaut, womit das Problem nachvollzogen werden kann. Zusätzlich finden sich auf der Seite eine detailliertere Beschreibung des Bugs. Tom Caspers war diesmal besonders schnell, wodurch der Hinweis auf den Testcase bereits gestrigen Thema im EFA-accessCast war und ich erst jetzt mit einer Veröffentlichung in meinem Blog nachziehen kann.


Seite 2 von 2 Seiten

 <  1 2