D-Sign24.de

das Problem ist mir auch schon aufgefallen, aber ich dachte bis jetzt, das sei ein allgemeines Problem mit dem PNG-Format.

Aber da müsste man dann ja relativ leicht Abhilfe schaffen können. Ich probiere das mal aus und schreibe dann hier den Lösungsansatz rein.

Ich habe jetzt die Lösung für die oben beschriebene Problematik gefunden - hier nun der Lösungsansatz.

Zunächst einmal habe ich eine Tabelle erstellt, in die in die oberste Zeile eine abgerundete PNG-Grafik mit linearem Farbverlauf eingebunden wurde. Die darunter liegende Zeile wird mit dem letzten Farbcode der Grafik fortgesetzt, so dass kein Unterschied zu erkennen sein sollte - der letzte Farbcode lautet #60A0C0.

im Firefox wird das erwartete Ergebnis angezeigt



im Internet Explorer 7 (IE 7) hingegen, ist eine Kante zu erkennen, die den Übergang von der Grafik zur Tabelle deutlich erkennbar macht - der Fehler ist hier rot markiert, da er auf der Grafik leider etwas schwer zu erkennen ist.



Um das Problem lösen zu können, habe ich zunächst einen Screenshot angefertigt und im Grafikprogramm den letzten Farbwert der Grafik - also genau über der Kante - ermittelt. Dieser Farbwert lautet nicht etwa #60A0C0, sondern #5597BA - soweit, so unschön.

Nun ist ja der Internet Explorer ohnehin nicht voll kompatibel mit dem W3C Standard und genau das kann man sich bei diesem Problem zu Nutzen machen.

Seit dem Internet Explorer 5 (unter Windows) bietet Microsoft eine Möglichkeit für den IE bestimmte Anweisungen zu notieren, die nur der IE und kein anderer Browser auswerten kann. Dabei handelt es sich um den so genannten "Internet Explorer Comment Hack".
Dabei wird im Head-bereich einer HTML-Datei ein Kommtenar notiert, der den IE anweist zusätzliche Datei zu laden.
Das folgende Beispiel soll dies demonstrieren:



In Zeile 5 wird zunächst ganz normal das Stylesheet für alle Browser eingetragen. In Zeile 8 bis 10 wird dem IE 7 (und nur diesem) gesagt, dass zusätzlich die Datei ie7.css geladen werden soll.
Da diese Anweisung auskommentiert ist, wird sie von allen anderen Browsern ignoriert. Nur der IE 5 und IE6 lesen diese Anweisung auch, fühlen sich aber davon nicht angesprochen, da sie ja nicht IE 7 sind.

In der Datei style.css sind alle Standardanweisungen enthalten - also Schriftzweisungen, Farbcodes, Klassen usw.
Die Klasse die im IE 7 geändert werden muss heißt hier im Beispiel pngclass - in der style.css hat sie die Hintergrundfarbe #60A0C0 zugewiesen bekommen.
Die Datei ie7.css enthält nur die Anweisungen für die pngclass - zugewiesen wurde der Farbwert #5597BA als Hintergrundfarbe.

Abgespeichert ergibt sich nun beim Laden der Seite das folgende Bild im IE7.





Wie schon erwähnt, eignet sich die Methode nicht nur für die oben erwähnte PNG-Problematik, sondern auch für diverse andere CSS-Probleme, die im Internet Explorer auftreten können. So kann man auch andere IE-Versionen ansprechen. Statt <!--[if IE 7]> kann man also auch <!--[if IE 6]> oder <!--[if IE 5]> schreiben - auch Kombinationen sind möglich. Will man alle IE-Versionen ansprechen kann man auch <!--[if IE]> schreiben.

Weiterführende Artikel zum Thema Browserweichen gibt es bei SelfHTML


Vermutung zur Ursache des PNG-Problems:
Offenbar ist die Engine des IE 7 nach wie vor nicht ohne Nachhilfe in der Lage transparente PNGs darzustellen - dies ist mir schon mehrfach beim Laden größerer PNGs aufgefallen. So sind diese erst nicht transparent und dann ganz plötzlich doch.
Scheinbar hat Microsoft im IE 7 einfach den alten Alpha-Filter-Hack, den man früher selbst im HTML-Dokument ausführen musste, standardmäßig slebst aktiviert und dabei kommt es scheinbar zu Fehlinterpretationen der Farbcodes.



Ob dieses Farbproblem auch schon im IE 6 bestand, habe ich noch nicht getestet....

Nachtrag:
Das beschriebene Problem besteht auch im IE 6 und damit vermutlich auch im IE 5 - damit sollte es oben statt <!--[if IE 7]> besser <!--[if IE]> heißen, damit der Farbcode in allen IE-Versionen korrekt gezeigt wird. Somit dürfte wohl auch mein Erklärungsversuch zur Ursache nicht wirklich stimmen.