Als ich in meinen letzten Post zum Thema PNG verfasste, habe ich geschickterweise komplett vergessen, auf die Einschränkungen und wichtigen Details der PNG-Lösung hinzuweisen beziehungsweise eines dieser Probleme überhaupt zu recherchieren. Dies soll hier nachgeholt werden.
.HTC, Windows XP SP2 & Apache
Metax brachte mich darauf, nochmal zu recherchieren wie es um die Kompatibilität von .htc-Files steht. Dort gibt es in der Tat eine Lücke, denn der Apache Webserver liefert .htc-Dateien mit einem MIME-Type aus, den der Internet Explorer 6 unter Windows XP mit installiertem Service Pack 2 nicht annimmt. Dort wird text/x-component verlangt, der Apache aber sendet www/unknown.
Wie man das Problem (per .htaccess oder Serverkonfiguration) löst, kann man beim Support von Microsoft erfahren. Nutzer von Microsoft-Servern sollten sich hierüber keine Gedanken machen müssen.
Wie konfiguriere ich mein Hintergrund-PNG?
Eine nicht unberechtigte Frage von Jeena Paradies. Sie lässt sich auch (leider) sehr einfach mit gar nicht
beantworten. Denn das was etwas leichtfertig als PNG für CSS-Hintergründe
betitelt wurde, ist eigentlich kein richtiges CSS-Hintergrundbild:
(AlphaImageLoader Filter) displays an image within the boundaries of the object and between the object background and content, with options to clip or resize the image.
Eine mit dem Filter geladene Grafik kann man also nicht ohne weiteres positionieren oder kacheln - sie ist kein Hintergrundbild. Aus diesem Grund muss auch im IE-Stylesheet der eigentliche Hintergrund entfernt werden, sonst bekommt man das Hintergrundbild und das für den IE geladene PNG zu sehen.
Was an dieser Stelle vielleicht man ganz sinnvoll wäre, ist eine kurze Erklärung zum AlphaImageLoader und dem was dieser überhaupt kann. Hier nochmal das Beispiel aus dem ersten Artikel:
/* AlphaImageLoader in Aktion */
#element {
width: 640px;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='bild.png');
}
Wie zu sehen ist, kennt der Filter drei Parameter. Während enabled und src wohl keiner Erklärung bedürfen, ist sizingMethod etwas interessanter, denn hier kann man etwas am Erscheinungsbild des Angezeigten verändern. Der Parameter kann einen von drei Werten annehmen:
crop: Clips the image to fit the dimensions of the object.
image:Default. Enlarges or reduces the border of the object to fit the dimensions of the image.
scale: Stretches or shrinks the image to fill the borders of the object.
Die einzigen Darstellungsoptionen die es gibt sind eine einfache Anzeige des Bildes links oben im betroffenen Element (crop) und ein Strecken des Bildes auf die Dimensionen des Elements (scale). Der andere Wert (image) reduziert das Element auf die Maße des Bildes und ist vermutlich in Sachen Hintergrund nur bedingt zu gebrauchen.
Also: Einen normalen gekachelten Hintergrund mit transparenten PNGs gibt es im Internet Explorer nicht. Man kann den AlphaImageLoader allerdings für Hintergrundbilder verwenden, wenn es sich um eine einfache Anzeige eines sich nicht wiederholenden, nicht positionierten Bildes handelt oder wenn das Strecken des PNGs eine optisch vertretbare Option darstellt - Bilder die nur 1px breit oder hoch sind sollten sich hierzu eignen. Eine positionierte, einfache Hintergrundgrafik könnte man unter Zuhilfenahme eines entsprechend platzierten Extra-Containers tricksen, in den dann das PNG gezeichnet wird.
Streikende Links
Ganz wichtig: Links in einem Container mit PNG-Hintergrund
wie oben beschrieben funktionieren ohne weiteres nicht oder nur bedingt. Das liegt eben daran, dass das PNG irgendwo zwischen Inhalts- und Hintergrundebene umherschwirrt und dabei Links oder zumindest deren Mouseover-Effekte blockiert. Zum Glück lässt sich das recht einfach korrigieren:
/* In die ie.css */
#mein-png-container a {
position: relative;
z-index: 1000;
}
Das verändert nichts am Aussehen, bringt aber die Links wieder zum laufen. Weitere Fragen und Probleme bin ich gern bereit zu lösen.
