nicht angemeldet
IE png Problem...
Aloha allerseits,
habe derzeit mit einem Problem zu kämpfen, was sich mir vorher in dieser Weise nie offenbarte: Alle Versionen des IE stellen halbtransparente .png - Grafiken, welche ich auf der Website meines Klienten benutzen möchte, nur mangelhaft bzw. wie auf dem Bild zu erkennen schwarz dar.
Nun ist dieses Problem schon seit jeher bekannt; allerdings wollen die von mir haufenweise ausprobierten hacks nicht funktioniern... kann jemand aus Erfahrung eine Alternative nennen?!
Danke in jeder Hinsicht :)
Beispiel: http://www.felix-albroscheit.de/problem.png
-
Hi,
afaik hat nur der IE6 Probleme mit pngs, und dafür (bzw. dagegen) kann ich diesen Workaround empfehlen.
Wenn das Problem in einer anderen Version des IEs auftritt liegts evtl am png selbst?
Hier wäre ein Onlinebeispiel nötig.~dave
-
Hi,
afaik hat nur der IE6 Probleme mit pngs, und dafür (bzw. dagegen) kann ich diesen Workaround empfehlen.
Wenn das Problem in einer anderen Version des IEs auftritt liegts evtl am png selbst?
Hier wäre ein Onlinebeispiel nötig.~dave
Jop diesen Fix habe ich schon ausprobiert -> Leider erfolglos.
Tatsächlich tritt das Problem in allen IE-Generationen auf; dass es an der .png- Datei liegt vermute ich auch, weiß mir allerdings keine Abhilfe zu schaffen (Da Photoshop die Grafik eigentlich -hoffentlich- richtig gerendert haben müsste...)!-
Link:
http://agentur-aeskulap.de/beta/images/banner.png-
Hi,
Link:
http://agentur-aeskulap.de/beta/images/banner.png<!doctype html> <html> <head><title></title></head> <body style="background:green"> <img src="http://agentur-aeskulap.de/beta/images/banner.png" alt="Testbild" /> </body> </html>Wird in meinem IE8 unter WinXP richtig angezeigt.
~dave
-
<!doctype html>
<html>
<head><title></title></head>
<body style="background:green">
<img src="http://agentur-aeskulap.de/beta/images/banner.png" alt="Testbild" />
</body>
</html>> > Wird in meinem IE8 unter WinXP richtig angezeigt. > > ~dave So, und jetzt das ganze in voller Fülle: [http://agentur-aeskulap.de/beta/](http://agentur-aeskulap.de/beta/ ) (der Code ist noch ziemlich Amok; handelt sich dabei schließlich um nen Entwurf).-
Hi,
So, und jetzt das ganze in voller Fülle:
http://agentur-aeskulap.de/beta/:-)
http://agentur-aeskulap.de/beta/Du hast nicht nur ein transparentes png, sondern das Element hat zusätzlich noch einen alpha-filter.
IE hat Probleme mit dieser Kombination.
<!doctype html> <html style="background:green"> <head><title></title></head> <body> <style type="text/css"> [code lang=css] html { background:green; } body { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://agentur-aeskulap.de/beta/images/banner.png') progid:DXImageTransform.Microsoft.Alpha(Opacity=50); height:200px; display:block; }</style> Lorem Ipsum!</body>
</html>[/code]Funktioniert zumindest im IE8 und 7.
IE6 nicht getestet, aber den sollte man eh ignorieren.(der Code ist noch ziemlich Amok; handelt sich dabei schließlich um nen Entwurf).
Oh ja, das ist er.
Wenn du von Anfang an gesagt hättest wo genau das Problem auftritt (Kombination von filter:alpha und transparentes background-image-png) hätte ich dir vermutlich auch gleich am Anfang helfen können.
~dave
-
Hi,
So, und jetzt das ganze in voller Fülle:
http://agentur-aeskulap.de/beta/
:-)
http://agentur-aeskulap.de/beta/Du hast nicht nur ein transparentes png, sondern das Element hat zusätzlich noch einen alpha-filter.
IE hat Probleme mit dieser Kombination.
<!doctype html>
<html style="background:green">
<head><title></title></head>
<body>
<style type="text/css">
[code lang=css] html {
background:green;
}
body {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://agentur-aeskulap.de/beta/images/banner.png') progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
height:200px;
display:block;
}> </style> > Lorem Ipsum! > </body> > </html>[/code] > > Funktioniert zumindest im IE8 und 7. > IE6 nicht getestet, aber den sollte man eh ignorieren. > > > (der Code ist noch ziemlich Amok; handelt sich dabei schließlich um nen Entwurf). > Oh ja, das ist er. > > Wenn du von Anfang an gesagt hättest wo genau das Problem auftritt (Kombination von filter:alpha und transparentes background-image-png) hätte ich dir vermutlich auch gleich am Anfang helfen können. > > ~dave Okay, leuchtet ein ;) Allerdings komme ich dennoch zu keinem vernünftigen Ergebnis... mein Code für das entsprechende Div sieht nun so aus: ~~~css .nivo-caption { position:absolute; left:-19px; top:85px; background:url(images/banner.png) no-repeat; padding-left:28px; width:560px; height:81px; z-index:89; color:#fff; font-family:sans-serif; font-size:17px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/banner.png') progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}Der ganze Slider basiert auf einem JQuery Plugin; das ist ebend der Nachteil: Was unter der Haube passiert -welcher Code produziert/verändert wird- bleibt ein Geheimnis... uncool!
-
Hi,
Allerdings komme ich dennoch zu keinem vernünftigen Ergebnis... mein Code für das entsprechende Div sieht nun so aus:
.nivo-caption {
position:absolute;
left:-19px;
top:85px;
background:url(images/banner.png) no-repeat;
padding-left:28px;
width:560px;
height:81px;
z-index:89;
color:#fff;
font-family:sans-serif;
font-size:17px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/banner.png') progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}Wenn du dem IE kein background-image gibst sollte es doch funktionieren oder? > Der ganze Slider basiert auf einem JQuery Plugin; das ist ebend der Nachteil: Was unter der Haube passiert -welcher Code produziert/verändert wird- bleibt ein Geheimnis... uncool! Eigentlich handelt es sich um ein CSS-Problem, von daher ist das JS egal. Ein Geheimnis ist es aber keineswegs, du kannst jederzeit den Quellcode anschauen und sogar ohne Probleme debuggen. Ein Geheimnis wäre es nur wenn man ohne große Ahnung von JS Copy&Pasted. ~dave-
Wenn du dem IE kein background-image gibst sollte es doch funktionieren oder?
Leider ist dies nicht der Fall...
Eigentlich handelt es sich um ein CSS-Problem, von daher ist das JS egal.
Ein Geheimnis ist es aber keineswegs, du kannst jederzeit den Quellcode anschauen und sogar ohne Probleme debuggen.
Ein Geheimnis wäre es nur wenn man ohne große Ahnung von JS Copy&Pasted.Stimmt, aber wer hat die Zeit dazu ;) Wobei ich mich hierum notfalls kümmern muss...fuuuuuuuuu
-
Hi,
Wenn du dem IE kein background-image gibst sollte es doch funktionieren oder?
Leider ist dies nicht der Fall...
http://agentur-aeskulap.de/beta/slider.css hier hast du es auf jeden fall nicht geändert.
Eigentlich handelt es sich um ein CSS-Problem, von daher ist das JS egal.
JQuery fügt dem Element inline
style="filter...hinzu, wodurch der Filter aus dem CSS überschrieben wird.
Deshalb funktioniert es nicht.~dave
-
JQuery fügt dem Element inline
style="filter...hinzu, wodurch der Filter aus dem CSS überschrieben wird.
Deshalb funktioniert es nicht.Daran habe ich auch gedacht... egal- rationale Lösung: Statt png einfach gif benutzen -funktioniert in allen Browsern problemlos ;)
-
-
-
-
-
-
-
-
-
-
afaik hat nur der IE6 Probleme mit pngs
Nein: dein Wissen ist in zweierlei Hinsicht unvollständig:
- der IE6 hat nur Probleme mit PNG-Files die einen Alpha-Kanal besitzen.
- der IE7 und IE8 haben Probleme mit alphatransparenten Grafiken die selbst aAlphatransparente Bereiche überlagern, skaliert werden oder In Elementen Liegen, eine reduzierte Deckkraft besitzen. Dieses Problem tritt im IE6 aber nicht auf.
-
