Folgende Beiträge wurden zum Thema »CSS« geschrieben:

30. Juli 2009

Transparente PNGs mit dem IE6

Bisher habe ich mich immer etwas davor gedrückt. Ich gebe es ja zu. Habe es immer geschafft, auf diese wunderbaren PNGs zu verzichten. Der Grund: Unser lieber IE6 und seine Vorgänger wollten von der ganzen Sache nichts wissen und haben die Transparenz in seltsame Hintergrundfarben verwandelt.

Bei meinem aktuellen Projekt wollte ich aber einfach nicht mehr darauf verzichten. Google hat mich auch ziemlich schnell auf die richtige Fährte bebracht. Die Lösung: iepngfix.htc » weiter…

23. Mai 2008

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