andare.ch – Blog

Auf Grund eines Artikels bei sam habe ich nochmals einen Anlauf unternommen, die transparenten Elemente im Layout meines Blogs auch für IE Benutzer sichtbar zu machen. Und es klappt nun tatsächlich, zumindest in IE 5 und neuer.

Das ganze besteht aus zwei Hacks, einem für die Hintergrundbilder und einem für die Bilder in den Postings.

Transparente Hintergrundbilder

Dies beruht einerseits auf einem Hack den ich via Kommentar von FJ bei sam’s Posting gefunden habe.
Für die Blockelemente mit einem transparenten Hintergrundbild, habe ich folgende Definition im CSS abgelegt:

* html div.menu {
background-image: none;
height: 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/wp-content/themes/andare/images/nav_bg.png',sizingMethod='scale');
}

Erklärungen:

• die Notation * html div.menu dient dazu, dass nur IE diese Definition interpretiert, d.h. sie muss folglich nach der Definition für die anderen Browser stehen.
• background-image: none; muss definiert sein um das Bild, welches in der Standarddefinition zugeordnet ist, auszublenden.
• height: 100%; dies oder eine exakte Breite oder Höhe muss zwangsläufig definiert sein, ist keine Grösse definiert, funktioniert der nachfolgende Filter nicht.
• filter:… Das ist die Microsoft Magie um das PNG transparent zu machen. Wichtig hier der Parameter auf der sizingMethod. scale skaliert das Bild auf die Grösse des Block Elements, crop zeigt nur den Teil des Bildes der in das Blockelement passt, image zeigt das Bild in der Originalgrösse und passt die Grösse des Blockelements an.

Zu beachen gilt es nun noch, dass zum Teil (!?) in den Blockelementen, die ein solchermassen definiertes transparentes Hintergrundbild haben, die Links die sich darin befinden, hinter dem Bild platziert werden und somit nicht mehr angeklickt werden können. Um auch dieses Problem zu beheben, muss das nächste Element innerhalb des Blocks oder ’spätestens‘ der <a> Tag mit position: relative; und sicherheitshalber z-index: 10; definiert werden.

PNG Bilder in Postings

Dazu habe ich den Hack von Erick Arvidsson verwendet, den Hack den sam referenziert hat, habe ich nicht zum Laufen gebracht.

Wichtig beim Anwenden des Hacks ist, dass die Pfade zum .htc Dokument und zum transparenten Hilfs-GIF absolut definiert sind. Jedenfalls hab‘ ich’s nicht fertig gebracht, in der WordPress Umgebung einen relativen Pfad zu definieren, der funktioniert hätte.

Beispiel

Schau Dir den HTML Code dieser Seite und die referenzierten CSS und htc Files an.