Wie bekomme ich den grauen Rahmen hinter transprarenten PNGs im IE weg?

Lösung: Google nach z. B. [url=www.google.com/search?q=transparenz png ie]Transprarenz PNG IE[/url]

Hallo,

nachdem ich gesehen habe, wozu diese Sparte ist, freue ich mich, endlich diese Frage stellen zu dürfen:

Wenn ihr mal meine Homepage mit dem Internet Explorer anschaut, seht ihr, dass die PNGs einen grauen Hintergrund haben, anstatt transparent zu sein. Das ist weder beabsichtigt noch schön, so sieht es aus:


Meine Frage: Wie bekomme ich diesem Rahmen weg, so dass die seite wie im Firefox auch angezeigt wird? Oder ist das im Internet Explorer grundsätzlich nicht möglich?

Ich danke schonmal im Vorraus.


Grüße,
Yogu

[meta]IE Internet Explorer PNG PNGs Transparent Transprarenz Alpha Kanal Alpha-Kanal Halbtransparenz grau grauer Kasten um Bild Bilder Grafik Grafiken[/meta]

Das der Internet Explorer 6 Probleme mit (Halb-)transparenten PNGs hat ist hinreichend bekannt. Es gibt im Netz auch einige Artikel und Tutorials wie erklären wie man das beheben kann.
Einfach mal bei Google danach suchen. Sollten sich hinreichend viele Anleitungen finden. Eventuell müssen die Suchbegriffe etwas variiert werden.

Im IE7 werden PNGs übrigens korrekt angezeigt.

Yogu hat folgendes geschrieben:

Wie bekomme ich diesem Rahmen weg, so dass die seite wie im Firefox auch angezeigt wird?

DarkHunter hat's schon erwähnt: IE7 benutzen

GTA-Place hat folgendes geschrieben:

DarkHunter hat's schon erwähnt: IE7 benutzen

Das bringt mir wohl wenig bei einer Webseite

DarkHunter: Danke! Da gibt es wirklich viele Möglichkeiten. Mal sehen, welche die beste ist.

Grüße,
Yogu

Normalerweise nimmt man dazu ein transparentes 1x1-Pixel gif und verwendet darauf einen IE-spezifischen Filter vis CSS (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader). Wenn der IE zu strikt eingestellt ist, funktioniert der Filter wohl aber eher nicht. Alle Fälle kannst du mit dem Workaround nicht abdecken, aber schon die meisten. Ein PNG Bild mit alpha anzeigen geht jedenfalls ohne weiteren Nebeneffekte.

Du kannst das entweder serverseitig lösen mit einem serverseitigen Browserdetect; es gibt auch JavaScript Scripts, die die Seite nach dem Laden geeignet anpasst (häufig sieht man jedoch kurzzeitig den unerwünschten Rahmen noch). Ich denke da gibt es viele Lösungen wenn du danach suchst. Bei allen Lösungen wirst du jedoch den AlphaImageLoader antreffen.

Jetzt nochmal danke: Ich habe meine Seite umgestaltet. Jetzt müsste auch alles klappen. Es gibt tatsächlich viele, viele Möglichkeiten, so etwas umzusetzen.

Auch wenn ich damit jetzt viel viel viel zu spät bin.

Das Problem beim IE 6 liegt daran, dass er die im PNG gesetzte Hintergrundfarbe zum Blenden benutz. Wenn du also wie auf deiner Seite sowieso nur einen weißen Hintergrund hast, dann kannst du entweder die Hintergrundfarbe im Grafikprogramm vor dem Speichern des PNGs auf Weiß setzten. Oder aber auch einfach die Transparenz weglassen, da sie optisch an deiner Seite ja nichts verändern würde. Soweit wie ich das gesehen habe. Falls du das Bild natürlich noch an verschiedenen anderen Stellen benutzen möchtest geht das natürlich nicht ganz so einfach. Aber in diesem speziellen Fall würde sogar etwas sehr einfaches ausreichen.

Ich für meinen Teil mag aber solche "hacks" absolut nicht. Ich habe schon zu viel Zeit in meinem Leben damit vergeudet eine Seite so zu verbiegen damit sie auch auf dem IE 6 halbwegs anständig aussieht. Denn dafür gibt es mittlerweile mehr als genug Alternativen. Allerdings habe ich auch nur eine private Seite. Und diese Aroganz gönne ich mir da einfach.

Ich wollte einfach flexibel bleiben. Mit transparenten PNGs kann ich zum Beispiel einfach mal ein Hintergrundbild einrichten, ohne mir groß darüber Sorgen zu machen.

Lossy eX hat folgendes geschrieben:

Ich für meinen Teil mag aber solche "hacks" absolut nicht.

Was meinst du mit "hacks"? Tricks, mit denen PNGs auch im IE 6 einwandfrei funktionieren? Die sind doch ganz hilfreich

Klar, wenn man richtige Transparenzen hat macht das sehr vieles einfacher. Das steht völlig außer Frage.

Okay. Hacks ist da vielleicht etwas bewusst provokativ gewesen. Eine Zeit lang wurden Teile des CSS durch spezielle Kommentare auskommentiert die aber durch ein fehlerhaftes Parsen des IEs aber doch wieder in diesem aktiv waren. Das waren dann richtige Hacks (heißt ja auch CSS Hack). Die Conditional Comments sind in meinen Augen nur wieder ein Versuch frühere Fehler zu vertuschen. Also die konsequente nichteinhaltung von Standards im IE5/6. Denn wenn sie sich an die Standards gehalten hätten bräuchte man so etwas nicht.

Ich für meinen Teil versuche recht nah am Standard zu bleiben. Was mir definitiv auch nicht immer gelingt. Aber solche Browserspezifischen Sachen wie CSS Hacks oder Conditional Comments lehne ich grundsätzlich ab. Denn wo so etwas hinführt hat man ja eigentlich mit dem IE5/6 schon lange genug bestaunen können.

Wie ich im letzten Post schon angedeutet hatte. Ich habe schon ein Paar nicht wirklich einfache Design umgesetzt. Allerdings habe ich konsequent das Problem, dass der IE6 immer wieder irgendwelche Macken hat. Mittlerweile sind meine Designs aber so ausgelegt, dass es nicht zu viele Probleme geben sollte. Aber sollte der IE da leichte Darstellungsprobleme haben ist mir das egal. Hauptsache es ist benutzbar. Denn ich habe schon zu viel Zeit mit IE Customizing verbracht. Zu mal der IE6 mittlerweile auch nicht mehr diese Verbreitung hat.


PS: Wobei mir da auch gerade auffällt. Du benutzt die Conditional Comments in deiner CSS Datei. Bei dem Kommentar handelt es sich aber um einen HTML Kommentar die dort eigentlich gar nicht erlaubt sind. Wenn ich mich da gerade nicht vertue.

Mir stellt sich da eine Frage: Wieso denkt ihr an den IE6? Wer den noch benutzt, ist doch selber Schuld. Der IE7 wurde durch das Automatische Update installiert. Es ist also völliger Blödsinn für den IE6 zu optimieren. Meine Seite sieht im Firefox und IE7 gleich aus (ohne jegliche Hacks), im IE6 nicht, aber das interessiert mich nicht (mehr).

Macht euch doch nicht unnötige Arbeit.

Oh, da haste wohl recht. Da hab ich ein bisschen geschummelt Aber mir fällt jetzt so auf die Schnelle kein anderes Verfahren ein, Firefox auszugrenzen, und IE reinzulassen. Wenn du da noch was weißt, nur her damit!

GTA-Place hat folgendes geschrieben:

Wer den [Internet Explorer 6] noch benutzt, ist doch selber Schuld.

He! Schonmal an die gedacht, die Windows 2000 verwenden? Microsoft ist wie viele andere Hersteller (z. B. ICQ) zu faul (oder unfähig !?), Programme zu schreiben, die auch auf Windows 2000 laufen.

Die, die Windows 2000 benutzen, benutzen wohl eher einen Alternativbrowser. Normalo-User haben eher Windows XP. (Außnahmen bestätigen die Regel)

Ich will die Diskussion nicht zu sehr in Richtung OffTopic zerren, aber: Es gibt Leute (wie z. B. Schüler im Informatikraum), die ein bestimmtes Betriebssystem haben (im Netzwerk (fast) immer Windows 2000), und einen bestimmten Browser verwenden müssen (standardmäßig bei Win2K IE5, maximal IE6). Und denen möchte ich meine Seite nicht vorenthalten.

GTA-Place hat folgendes geschrieben:

Die, die Windows 2000 benutzen, benutzen wohl eher einen Alternativbrowser. Normalo-User haben eher Windows XP. (Außnahmen bestätigen die Regel)

Solange der IE6 noch einen signifikanten Marktanteil hat (und das hat er AFAIK sehr wohl noch), sollte man ihn wohl oder übel unterstützen. Das Teil ist IMHO ein Krampf, wird aber leider durchaus noch genutzt.
Ich sehe grad, Yogu hat geantwortet. Und damit muss ich gar nichts mehr sagen, denn er hat mir alles schon vorweggenommen...

Browseranteile: Dazu sollte man sich mal folgende Heise News anschauen. Traurig aber Wahr. Im Dezember 2007 waren auf Heise noch mehr IE6 als IE7 zu besuch. Wenn auch nur knapp. 12.6% sollte man nicht vernachlässig aber ein bisschen treten ist okay.

Yogu: Wenn es geht kannst du eine seperate CSS benutzen und diese unterhalb deiner bestehenden einbinden. Da kannst du dann auch legal die Conditional Comments benutzen. Wenn die Seite dynamisch erstellt wird sollte es ja recht einfach sein.

Okay, dass es immer noch "Server-Admins" (also Mathe-Lehrer, denen dieser Job aufgezwängt wurde) gibt, die mit Windows 2000 arbeiten, daran habe ich nicht gedacht

@Timosch: Nein. Wenn man ihn unerstützt, sehen die User keinen Bedarf zu wechseln.

GTA-Place hat folgendes geschrieben:

Nein. Wenn man ihn unerstützt, sehen die User keinen Bedarf zu wechseln.

Ich glaube das Argument hängt. Denn wenn ich mit dem FF eine Seite sehe die nicht geht oder zu viel haben will, dann werde ich die eher nicht mehr besuchen als auf einen Browser zu wechseln mit dem sie vernünftig dargestellt wird.

Das aber nur mal am Rande auch wenn es gerade vollkommen am eigentlichen Thema vorbei geht.

Ehmmm...

Alöso wenn ich die Seite mit dem IE7 Öffne, siehts so aus!

MDX hat folgendes geschrieben:

Ehmmm... Alöso wenn ich die Seite mit dem IE7 Öffne, siehts so aus!

Oh, das sieht gar nicht gut aus. Ich habe aber leider auch keinen IE7, um das testen zu können. Vielleicht hakt er bei "if lt IE7", das könnte sein. Vielleicht kannst du mal die Seite www.yogularm.de/test.htm aufrufen, dort ist diese Zeile entfernt.

Am besten meldest du dich im Yogularm-Forum Wünsche, Anregungen und Kritik, dann können wir das dort regeln.

Grüße,
Yogu