HTML/CSS - Bugs & Hacks

1. Die Abschnitte

• Überblick
• Grundsätzliche Tipps für den IE
• Conditional Comments
• Double Margin Bug
• Three Pixel Text Jog
• Listen Bug
• Duplicate Characters Bug
• Fieldset Bleed Bug

2. Einführung

Ich habe schon mehrmals bei der Theorie darauf hingewiesen, dass der Internet Explorer 6 und auch 7 bei der Interpretation von CSS-basierten Seiten sehr eigenwillig sein kann. Leider ist er nicht einzige Browser, der ein wenig kreativ bei der Darstellung ist. Auf den folgenden Seiten werde ich euch anhand einfacher Beispiele einzelne Bugs vorstellen, und falls vorhanden, auch die entsprechenden Lösungen liefern. Diese Liste werde ich im Laufe der Zeit kontinuierlich erweitern.

Einige Bugs sind mir namentlich bekannt, aber bei anderen muss ich raten. Daher vergebe ich in so einem Fall eigene Bezeichnungen dafür. Wer die richtigen kennt, schicke mir doch bitte eine Mail.

3. Die Daten

Diesmal gibt es keinen Quellcode zum ausprobieren, sondern nur fertige Lösungen, wo die entsprechenden CSS-Anweisungen auskommentiert sind. Siehe rechts unter "Infos".

4. Tipps

bei Darstellungsproblemen solltet ihr folgende Regel beachten.

• Niemals HTML Transitional ohne Pfadangabe als Doctype-Definition angeben.
• Immer mit einem zweiten und dritten Browser testen.
• Benutzt immer einem HTML- und CSS-Validator. Und die Fehler sollten natürlich sofort beseitigt werden.
• Benutzt, falls möglich, mehrere Versionen der einzelnen Browser.
• Sieht es in diversen Browsern identisch aus, nur nicht im Internet Explorer 6/7, so ist letzterer Schuld.
• Wenn dem nicht so ist, müsst ihr einfach weiter forschen.

5. Hilfe

Wenn ihr Darstellungsprobleme habt, die eurer Meinung nach definitiv auf einem Darstellungsfehler innerhalb eines Browsers basieren, so schickt mir den Code (gut kommentiert) und ich werde mir das mal ansehen. Das heißt aber nicht, dass ich euch eure Arbeit abnehme, sondern nur, dass ich irgendwann mal dazu etwas veröffentliche.

7. Übersicht

Grundsätzliche Tipps für den IE 6/7

Browser:

Hier gibt es einige grundsätzliche Tipps, wie man diesen Browser trotzt all seiner Mängel überlisten kann.

Conditional Comments

Browser:

Die Programmierer von Microsoft haben wohl wegen ihres schlechten Gewissens uns eine elegante Möglichkeit geboten, spezielle CSS-Anweisungen für den Internet Explorer einzubinden. Das zeige ich euch hier.

"Double-Margin"-Bug

Browser: (Version 6.0)

Ein Block-Element hat einen margin-left-Wert und die Eigenschaft float: left. Im Internet Explorer 6 wird dieses Element nun um die doppelte Breite eingerückt.

"Tree Pixel Text Jog"

Browser: (Version 6.0)

Ein Block-Element hat die Eigenschaft float: left mit einer wie auch immer gearteten Höhe. Im darauf folgenden Block-Element wird der Text solange um 3 Pixel nach rechts eingerückt, bis die Höhe des vorherigen Elementes überschritten wird.

Listen-Bug

Browser: (Version 6.0)

Er tritt auf, wenn in einer Liste die Abstände der einzelnen Elemente nach unten viel zu groß sind.

"Dublicate Characters" Bug

Browser: (Version 6.0)

Eine echt kranke Geschichte, wenn man auf einmal Geisterbuchstaben zu sehen bekommt. Und warum? Nur weil man seinen HTML-Code sauber kommentiert.

Fieldset Bleed Bug

Browser: (Version 6.0 und 7.0)

Und wieder mal unser Lieblingsbrowser. Diesmal geht es um die Formatierung von <fieldset>-Elementen innerhalb von Formularen.

weiter zum nächsten Abschnitt