• < blättern >

8.2 Der Holly Hack und Bugs bei der Darstellung von floatenden Elementen

Schwieriger zu beheben ist das so genannte Guillotinen-Bug. Dieses Bug betrifft Inhalte, die in einem Container auf ein floatendes Element folgen und Links enthalten, deren Darstellung mit der Pseudoklasse :hover festgelegt wird. Wenn das Überfahren des Links dazu führt, dass sich der Hintergrund, der Schriftstil oder Eigenschaften der Box (padding, border) verändern, kommt es zum Guillotinen-Effekt. Der Inhalt wird zunächst korrekt dargestellt; wenn man dann aber die Links mit der Maus überfährt, wird der Inhalt des floatenden Elements, der weiter nach unten reicht als der Inhalt, der im Dokument auf das floatende Element folgt, abgeschnitten. Der Grund für diesen Effekt ist ein Fehler bei der Implementierung von float. Ein floatendes Element soll eigentlich aus dem Layoutstrom herausgenommen werden; an welcher Stelle im Dokument es dargestellt wird, ergibt sich aber aus seiner Position im Text bzw. Dokumentinhalt. Für den Internet Explorer 5 und 6 bleibt ein floatendes Element aber Bestandteil eines Containers, in den es eingebettet ist. Beim Rendern wird die Höhe des Container so berechnet, dass er das -floatende Element einschließt. Überfährt man den Link, veranlasst man den Browser, die Dimensionen der Container-Box neu zu berechnen. Diesmal wird aber die Höhe des Inhalts des floatenden Elements nicht berücksichtigt, so dass er unten abgeschnitten wird.

Das Guillotinen-Bug wirkt sich aus, wenn die Höhe des Container-Elements angegeben ist. Man kann den Fehler aber nicht mit Sicherheit umgehen, indem man die Höhe des Containers nicht spezifiziert. Der Inhalt wird nur dann nicht guillotiniert, wenn ein Element folgt, bei dem clear: both spezifiziert ist. Andernfalls sorgt das Element body, das ja auch ein Container für das floatende Element ist, dafür, dass dessen Inhalt abgeschnitten wird.

Man kann das Auslösen der Guillotine also verhindern, indem man ein

<div style="clear: both"></div>

einfügt. Dieses leere div gehört in den Container, dessen Berechnung das Abschneiden bewirkt. Allerdings verwendet man dann Markup zu Layout-Zwecken und verstößt damit gegen das Gebot des semantischen Markup.

Standardkonform ist es, stattdessen den Holly Hack zu verwenden, um die Höhe des auf das floatende Element folgenden Inhalts in einer Weise zu berechnen, die sich nur auf den Internet Explorer auswirkt. Dazu muss er in ein eigenes Element eingeschlossen werden.

Der Holly Hack dient dazu, die Höhe einer Box festzulegen, ohne dass sich dies auf die tatsächliche Höhe auswirkt. Man nutzt dabei ein anderes Bug des Internet Explorers aus: wenn eine Größe für den Inhalt einer Box angegeben ist, die für den Inhalt nicht ausreicht, vergrößert der Internet Explorer die Box so, dass der Inhalt in sie hineinpasst.

Der Holly Hack funktioniert mit einem Selektor des folgenden Typs:

* html p

Diesen Selektor verwendet nur der Internet Explorer, denn seine Algorithmen benutzen ein fiktives Element, in das das Dokumentelement html seinerseits eingebettet ist. Größenangaben hinter einem solchen Selektor wirken sich also nicht bei anderen Browsern aus.

Um die Angaben vor den Internet Explorer für den Mac zu verstecken, sorgt man dafür, dass dieser Browser annimmt, es handele sich um den Inhalt eines Kommentars. Der IE Mac versteht die Konstruktion \* als Escapen oder Entwerten des Zeichens *. Das folgende HTML-Fragment wird von diesem Browser daher komplett als Kommentar verstanden:

/* Hides from IE-mac \*/
* html p { height: 1%; }
/* End hide from IE-mac */

Der Holly Hack lässt sich auch anwenden, wenn absolut positionierte Boxen innerhalb von relativ positionierten Elementen nicht korrekt dargestellt werden. Wenn die absolut positionierte Box größer ist als die relativ positionierte, deren Nachkomme sie im Dokumentbaum ist, wird die relativ positionierte Box standardwidrig vergrößert, so dass die absolut positionierte Box in sie hineinpasst. Es ist in vielen Fällen aber unmöglich, nach unten zu scrollen, wenn die Box länger ist als der Viewport. In diesem Fall muss height:1% auf die relativ positionierte Box angewendet werden.

Eine weitere Gelegenheit, den Holly Hack anzuwenden, ist das so genannte 3-Pixel-Text-Jog, das dazu führt, dass der Inhalt von Elementen, die rechts oder links von einem Float positioniert werden, von dem floatenden Element um drei Pixel verschoben wird.

• < blättern >

---

Home • Über uns • Qualität • AGB • Impressum • Stadtlupe • Stellenangebote & Jobs

Die TEIA AG bietet Bücher, Lernprogramme, SCORM und kostenlose Online Kurse zu Microsoft-Anwendungen, Open Office, IT, Programmierung und Wirtschaft.
Zu fast allen Online Kursen können zudem Zertifkate oder Teilnahmebescheinigungen erworben werden.

Access 2002 •  Access 2003 Basis •  Access 2003 Prof. •  Access 2007 Basis •  Adobe GoLive •  Adobe Photoshop •  AJAX •  Allgemeine Betriebswirtschaftslehre •  Apache •  Basiswissen für Selbstständige •  Bewerbungstipps •  Calc Basis •  Dreamweaver CS4 •  eBusiness •  eCommerce •  eGovernment •  Erinnerung an Douaumont •  Excel 2002 •  Excel 2003 Basis •  Excel 2003 Prof •  Excel 2007 Basis •  Excel 2007 Prof. •  Excel 2010 Basis •  Finanzmanagement •  HTML •  HTML CSS •  HTML Grundlagen •  Industriegütervertrieb •  Internet Technik •  JAVA •  JavaScript •  Lernen ohne Lehrer •  Marketing •  Markup-Sprachen •  Organisation und Technologiemanagement •  osCommerce •  Outlook 2003 •  Outlook 2007 •  Perl und CGI •  Personalmanagement •  PHP 4.3 •  PowerPoint 2003 •  Powerpoint 2007 •  Powerpoint 2010 •  Projektmanagement und MS Project 2000 •  Projektplanung und Projektoptimierung mit MS Project 2003 •  Rechnungswesen mit Beispielen •  Sicher auftreten •  SQL •  TEIA-Internet-Führerschein •  Unternehmensführung •  US-GAAP und IAS/IFRS •  Vertragswesen eBusiness •  Vista •  VWL •  Warum ich kein Christ sein will •  Widerstand •  Windows XP •  Wirtschaftsrecht •  Word 2002 •  Word 2003 Basis •  Word 2003 Prof. •  Word 2007 Basis •  Word 2007 Prof. •  Writer Basis •  XML •  XML Grundlagen •  XML XSL

Letzte Aktualisierung: 29.07.2010 13:03:27

Letzte Inhaltliche Überarbeitung: 30.06.2009 12:23:29

© 2000 - 2010 TEIA AG - Internet Akademie und Lehrbuch Verlag