Tipp: Win Explorer und transparente PNG 24

Schomo · 23.03.06

Hi Folks, vielleicht habt ihr auch schon Würgattacken bekommen als ihr feststellen musstet dass der ach so tolle Internet Explorer unter Win (am Mac läuft es lustigerweise) keine transparenten PNG 24 darstellen kann. Die Transparenz wird grau dargestellt. Im Web fand ich dann aber einen Weg um dieses Problem zu beheben. Hier der Qual Kot:

Code:

[COLOR="Red"]<DIV ID="myDiv" 
	STYLE="position:relative; 
	height:250px; 
	width:250px;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
        (src='myimage.png',sizingMethod='scale');"></DIV>[/COLOR]


Hier die Version, die ich mal angewendet habe damit ihr seht 
wie es dann in der Praxis aussieht:

<div id="Layer1" 
     style="position:absolute; 
     width:120px; 
     height:89px; 
     z-index:1; 
     left: 657px; 
     top: 22px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pics/pngs/presse.png',sizingMethod='scale');"></div>

Vielleicht hilft es ja dem einen oder anderen.

Gruß Schomo

stk · 23.03.06

Moin,

klingt sehr interessant! Und das DIV dann auf das Image anwenden?!
Wie schaut's mit Codevalidität aus? Den CSS-Eintrag muß man doch sicher wieder IE exklusiv machen? Hast mal 'ne Quelle, bzw. einen Link wo man sich das IRL anschauen kann?

Gruß Stefan

Schomo · 23.03.06

Hi Stefan,

hab mal ein testfile online gestellt. Achte auf den Zeitungsstapl rechts oben.
nix link siehe den oben

Gruß Schomo

tmconnect · 23.03.06

Hi Schomo,

sitze gerade im Büro und muss hier mit dem Explorer unter Windows arbeiten :-c . Habe Deinen Post mit Interesse gelesen und jetzt auch mal Deine Seite aufgerufen. Aber leider ist der Zeitungsstapel bei im IE von dem unschönen grau umgeben.

Gruß
Thomas

stk · 23.03.06

Moin,

hmm, so ähnlich hab ich mir's gedacht.

Funktioniert nur leider nicht ganz, weil das PNG aus dem <img>-Tag das CSS-Konstrukt überlagert und damit das Ding wieder Grau wird. Allerdings blitzt beim Laden dahinter eine korrekte Darstellung auf.

Sprich: es sollte mit PNGs funktionieren, die als CSS-Background übergeben werden oder es muß sichergestellt werden, das das <img> für den IE unsichtbar gestellt wird.

Da die Validierung mit dem »filter: progid: … « eh fehlschlägt wäre es also durchaus zulässig, diesen CSS-Teil IE-exklusiv zu machen. Folgende Einfügung im <head>:

Code:

<!--[if IE 6]>
<style type="text/css" media="screen">
.Layer1 { 
     position:absolute; 
     width:120px; 
     height:89px; 
     z-index:1; 
     left: 657px; 
     top: 22px; 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pics/pngs/presse.png',sizingMethod='scale');"
   }

.Layer1 img {
   display: none;
   visibility: hidden;
   height: 0;
   width: 0;
  }

</style>
<![endif]-->

Und natürlich das betreffende DIV mit o.g. Klasse ausstatten.

Super gut! Vielen Dank dafür! Werd gleich mal meine vorgestrigen IE-Workarounds mit GIFs in meiner Macsupport-Seite darauf hin anpassen.

BTW: das Table-Konstrukt der Seite wird in Firefox anders interpretiert. Magst nicht gleich auf was sparsameres an Code umsteigen

?

Gruß Stefan

Schomo · 23.03.06

Mist ich merke gerade das der Explorer das zwar darstellt, aber doofer weise dann der Firefox zickt. Wenn die Zeile

Code:

 <img src="pics/pngs/presse.png" width="110" height="110">

nicht drin ist, geht es unter Explorer, aber nicht unter Firefox!?!

Mist wohl zu früh gefreut.

Ich teste mal weiter. Ich hab nur VPC un da schlafen mir beim Testen die Füsse ein.

Ähh Stefan, das ist nur eine Bastelseite mit x-Sachen die ich grad ausprobiere.

Gruß Schomo

stk · 23.03.06

Moin,

das <img> mußt drinlassen, aber für den IE unsichtbar machen - das erreicht o.g. Code den ich gepostet hab.

Ok, hätte ja ein aktuelles Projekt in der Entstehung sein können …

Gruß Stefan

Schomo · 23.03.06

Gute Idee Stefan mit der Weiche, das Hintergrundbild verschwindet, aber leider bleibt das vordere png immer noch grau. Vielleicht sollte man eher eine Firefox Weiche basteln?
http://www.testort.de/png_test/test3.htm da hab ich deinen Vorschlag reingebastelt.

Gruß Schomo

stk · 23.03.06

Moin,

kleiner Fehler: .Layer1 mußt im HTML mit class="Layer1" ansprechen, nicht mit id. Und hinter dem ; von Filter ist das " zuviel - führt zu Mißinterpretation des Gesamtkonstrukts. Aber ich glaube ich hab's:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PNG in IE</title>
</head>
<style type="text/css" media="screen">
body {
	background: #f90;
	}

</style>

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='presse.png');
		height: 1px;
		width: 1px;
   }

.pngweg img {
	visibility: hidden;
	display: none;
	height: 0;
	width: 0;
  }

</style>
<![endif]-->
<body>
<div class="pngweg" ><img src="presse.png" width="110" height="110"></div>
</body>
</html>

Gruß Stefan

Schomo · 23.03.06

Klasse Stefan das war es! Der Hit, ich bin offiziell begeistert!!!
Dann hat es ja doch was gebracht.
www.hteaml.de/png_test/test6.htm

Hab es noch mal geändert

Wie sieht es jetzt bei dir Stefan aus?
Gruß Schomo

Hier der Code falls es den Link micht mehr geben sollte:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>PNG in IE</title>
		<style type="text/css" media="screen"><!--
#Ebene1 { position: absolute; top: 34px; left: 16px; width: 100px; height: 100px; visibility: visible; display: block }
--></style>
	</head>
<style type="text/css" media="screen">
body {
	background: #f90;
	}

</style>

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pics/pngs/presse.png');
		height: 1px;
		width: 1px;
   }

.pngweg img {
	visibility: hidden;
	display: none;
	height: 0;
	width: 0;
  }

</style>
<![endif]-->
<body>
		<div id="Ebene1" class="pngweg">
			<img src="pics/pngs/presse.png" width="110" height="110"></div>
		<table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>Wie beiläufig, beim Umblättern der Buchseiten, habe ich Dein B berührt.</td>
    </tr>
    <tr>
      <td> </td>
    </tr>
  </table>
</body>
</html>

stk · 11.04.06

Moin,

eins hab ich aber noch: wenn ich das PNG im Background verwende kann ich bei standardkonformer CSS-Anwendung die Position des Images bestimmen (top, bottom, left, right, center, middle, bzw. px Werte).

Wie mache ich das mit dem IE-Konstrukt :oops:

?

Gruß Stefan

Schomo · 11.04.06

Was meinst du mit Background? Kommt dahinter noch was? Farbe oder anderes Bild??? Und drüber bügelst du irgend einen Layer, oder wozu brauchst du das?

Gruß Schomo

andi*h · 11.04.06

hello,

ich hab's vor kurzem auch mal feststellen müssen, hab dann kurz im web gesucht und verwende seit dem das script von ntlworld.

kommt bestimmt auf's gleiche raus wie beim oben genannten, sieht, denke ich, aber irgendwie schlanker aus

lg, andi

Schomo · 11.04.06

Hi Andi, was ist da schlanker? Verstehe ich net. Ist doch der Gag, dass es mit CSS auch geht. Ausserdem wird bei deinem mit JavaScript gearbeitet. Versuch ich soweit zu vermeiden wie es geht, deswegen bin ich ja so begeistert von der Möglichkeit.

Gruß Schomo

andi*h · 11.04.06

hi schomo,

naja..der code in der seite.
ich wollte jetzt deine variante aber auch nicht schlechter, bzw. meine besser dastehen lassen - war nur "mein senf" und der hinweis auf eine weitere möglichkeit

aber was hast du denn gegen javascript wenn ich mal fragen darf?

lg, andi

stk · 11.04.06

Moin,

der Sinn von CSS ist ja soviel Text wie Möglich im Content mit rudimentärem HTML zu umstellen und die Grafik wo notwendig per CSS-Anweisung nach zuladen. Z.b. kann man prima ein <ul> Liste von Navigationspunkten anlegen. Gebe ich jedem <li>-Element eine eigene Klasse (für den IE, der Rest könnte auch den Linkpfad auswerten o_O

) kann das noch mit einer hübschen Grafik versehen, den Navigationspunkt schmückt. Oder: statt einer statischen Farbe im Hintergrund lege ich ein hübsches, freigestelltes Bildchen in ein <div> um's optisch auf zu peppen. Nehme ich PNGs für solche Dekobildchen muß ich mir um die Hintergrundfarbe die es überlagern soll, keinen Kopf machen.

Beispiel: ich habe ein <div id="irgendwas"> das 200px breit und 500px hoch ist in die rechte untere Ecke soll ein freigestelltes Bildchen names "bild.png" rein, das 50px breit und 150 px hoch ist. Die Anweisung für standardkonforme Browser lautet:

Code:

#irgendwas {
  width: 200px;
  height: 500px;
  background: #f90 url("bild.png") no-repeat bottom right;
  }

Fertig. Nehme ich den IE workaround her, bekomme ich zwar das Bild in den Hintergrund gepackt, aber grundsätzlich nach links oben. Für's Positionieren fehlen die notwendigen Parameter

.

Gruß Stefan

Schomo · 11.04.06

Bin gerade dabei mir die uferlosen Möglichkeiten von CSS draufzuschaffen. Im Moment mach ich Webseiten noch recht antiquiert

Stefan du arbeitest ja schon eine Weile damit. Ich bin da noch am Lernen gerade die Geschichte mit den unsortierten listen ist der Hit. CSS wird für mich immer abgefahren, da ist HTML sehr eingeschränkt. Da gibt es doch bestimmt noch einen Filter für den IE. Ich war mal auf einer Seite die haufenweise Filter vorgestellt haben für den IE. Blöderweise net gemerkt.

@ Andi nein war auch nicht als Kritik zu verstehen, meinerseits, aber JavaScript mag ich einfach net so gern, ist nur mein persönliches Ding. In jedem Falle DANKE für deinen Tipp, man sollte nie nur eine Lösung kennen, deswegen bin happy über deinen Post.

Gruß an euch Schomo

andi*h · 11.04.06

hello,

"happy" ist ja cool!
danke auch

lg, andi

stk · 11.04.06

Moin,

na ja - HTML wird auf das zurückgeführt für das es eigentlich mal gedacht war, bis mal ein Blödel sich »font« und Tabellen zum Layouten etc. einfallen ließ und das W3C nur noch konsterniert den Status Quo zementieren konnte.

Zum Trost: auch mit CSS ist längst nicht alles machbar. Ich kämpfe gerade mit einem Online-Shop, den die Grafikerin partout in einer fixen Box in die Mitte des Viewports gehangen haben will und wo dann innerhalb der Box dann nur bestimmte Bereiche scrollen sollen :oops:

. Da flippt dann sogar Opera aus wenn die diversen fixed, absolute und relative Positionierungen zu einander gefahren werden :-c.

Gruß Stefan

Schomo · 11.04.06

Ich weiss Stefan es ist pervers, aber wäre ein iFrame was? Ist manchmal ganz nett. Ich weiss du hasst Frames

Harrrrrr

Gruß Schomo

Tipp: Win Explorer und transparente PNG 24

Zehendlieber

Grünapfel

Zehendlieber

Meraner

Grünapfel

Zehendlieber

Grünapfel

Zehendlieber

Grünapfel

Zehendlieber

Grünapfel

Zehendlieber

andi*h

Gast

Zehendlieber

andi*h

Gast

Grünapfel

Zehendlieber

andi*h

Gast

Grünapfel

Zehendlieber

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)