IE6 Fehler bei Listen mit Hintergrundbild

Heute durfte ich bei der Arbeit an einer neuen Website für einen Agentur-Kunden einen wunderbaren Fehler des IE6 im Bezug auf Listen mit Hintergrundbild kennen lernen. Sein Name: “Disappearing List Background Bug“. Ich muss dazu sagen, die Freude war sicherlich nicht “ganz meinerseits”.

Ausgangspunkt für diesen Fehler war eine Liste, der ich mit Hilfe von CSS den “Punkt” genommen habe (list-style-type:none;) und dann auf die einzelnen Listen-Elemente per “background” ein neues Hintergrundbild verpasst habe. Grund: Positionierung von Hintergründen ist per CSS möglich, jedoch nicht von Listen-Zeichen.

Leider hat der IE6 die CSS Eigenschaften gar nicht oder nur bei einem Teil der Punkte eingesetzt. Bei sinnlosem hämmern auf “F5″ blinkten also die kleinen Hintergrund-Listen-Punkte mal auf und mal eben nicht.

Problematisch bei Fehlern dieser Art finde ich immer, dass ich keinen richtigen Anhaltspunkt habe, mit dem ich danach “googeln” kann. Nach langer Suche mit den unterschiedlichsten Suchbegriffen und -kombinationen wurde Google mit “ie6 li css teilweise” gefüttert. Relative sinnlose Suchwörter, aber meine Verzweiflung war groß.

Der erste Treffer führte mich direkt auf www.yaml.de zu einer Seite, die verschiedenste Bugs und ihre Lösungen aufzeigt. Da fand ich dann auch den Übeltäter namens “Disappearing List Background Bug” und die dazugehörige Lösung:

ul {position:relative;}

Hervorgerufen wird der Fehler durch ein <DIV>, dass per CSS die Eigenschaft “float:” zugewiesen bekommt und die entsprechende Liste beinhaltet, was natürlich bei mir der Fall war. *seufz*

Für alle die meinen Retter kennen lernen möchten: 3.5.1 Struktur- und layoutunabhängige Bugfixes