1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Tipp: Win Explorer und transparente PNG 24

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Schomo, 23.03.06.

  1. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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
     
  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  3. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    Hi Stefan,

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

    Gruß Schomo
     
    #3 Schomo, 23.03.06
    Zuletzt bearbeitet: 23.03.06
    stk gefällt das.
  4. tmconnect

    tmconnect Meraner

    Dabei seit:
    09.12.05
    Beiträge:
    228
    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
     
  5. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  6. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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
     
  7. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  8. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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
     
  9. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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 gefällt das.
  10. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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>
    
     
    #10 Schomo, 23.03.06
    Zuletzt bearbeitet: 24.03.06
  11. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  12. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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
     
  13. andi*h

    andi*h Gast

    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
     
  14. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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
     
  15. andi*h

    andi*h Gast

    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
     
  16. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  17. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    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
     
  18. andi*h

    andi*h Gast

    hello,

    "happy" ist ja cool!
    danke auch :)

    lg, andi
     
  19. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  20. Schomo

    Schomo Russet-Nonpareil

    Dabei seit:
    15.11.04
    Beiträge:
    3.750
    Ich weiss Stefan es ist pervers, aber wäre ein iFrame was? Ist manchmal ganz nett. Ich weiss du hasst Frames ;) Harrrrrr

    Gruß Schomo
     

Diese Seite empfehlen