<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bissinger&#039;s Blog &#187; PNG</title>
	<atom:link href="http://blog.bissinger.biz/tag/png/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.bissinger.biz</link>
	<description>Der tägliche Computer-Ärger hat ein Ende... oder doch nicht!?</description>
	<lastBuildDate>Sun, 07 Mar 2010 17:43:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Transparente PNGs für den Internet Explorer 6</title>
		<link>http://blog.bissinger.biz/transparente-pngs-fur-den-internet-explorer-6/</link>
		<comments>http://blog.bissinger.biz/transparente-pngs-fur-den-internet-explorer-6/#comments</comments>
		<pubDate>Wed, 27 Aug 2008 10:07:51 +0000</pubDate>
		<dc:creator>Manuel Bissinger</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[PNG]]></category>
		<category><![CDATA[Transparent]]></category>

		<guid isPermaLink="false">http://blog.bissinger.biz/?p=244</guid>
		<description><![CDATA[Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren. In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-245" title="PNG-Logo" src="http://blog.bissinger.biz/wp-content/uploads/2008/08/png.jpg" alt="" width="100" height="75" />Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren.</p>
<p>In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der Nutzung von Microsoft&#8217;s AlphaImageLoader-Filter, der durch DirectX bereitgestellt wird. Zu beachten ist, dass man den Code nur auf das background-Element im CSS beziehen kann. img-Tags werden davon nicht angesprochen. Per <a href="http://de.wikipedia.org/wiki/Conditional_Comments" onclick="pageTracker._trackPageview('/outgoing/de.wikipedia.org/wiki/Conditional_Comments?referer=');">Conditional Comment</a> wird der entsprechende CSS-Code speziell dem IE6 zugewiesen.</p>
<p>Wichtig bei der Filter-Angabe ist, dass man keine Leerzeichen verwendet. In einigen Anleitungen sind diese leider vorhanden und das Copy&amp;Paste funktioniert dann natürlich nicht. Auch die Pfadangabe zu den Bildern unterscheidet sich zwischen dem Filter und dem background-Element im CSS.</p>
<pre class="css">&lt;style type="text/css"&gt;
div#logo {
background-image: url(../images/logo.png);
}
&lt;/style&gt;
&lt;!--[if lte IE 6]&gt;
&lt;style type="text/css"&gt;&lt;!
div#logo {
filter:progid <img src='http://blog.bissinger.biz/wp-includes/images/smilies/icon_biggrin.gif' alt=':-D' class='wp-smiley' /> XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');
background: none;
}
&lt;/style&gt;
&lt;!--[endif]--&gt;</pre>
<p>Der Filter bietet unterschiedliche Möglichkeiten, das Bild zu skalieren. Über die Werte crop, image bzw. scale, die dem Element <code>sizingMethod</code> zugewiesen werden können, kann man das Bild auf folgende Weise skalieren:</p>
<ul>
<li>crop &#8211; Container und Bild behalten die angegebene Originalgröße</li>
<li>image &#8211; Container wird auf die Bildgröße skaliert und enthaltener Text wird abgeschnitten (entspricht overflow:hidden) (Default-Wert)</li>
<li>scale &#8211; Bild wird auf die Containergröße skaliert</li>
</ul>
<p><span style="color: #ff0000;">Update</span>: Auch img-Tags können per Inline-Styles transparent gemacht werden. Hierbei wird dann das src-Element überschrieben.</p>
<pre class="html">&lt;img src="../images/logo.png" style="width: 200px; height: 80px; filter:progid <img src='http://blog.bissinger.biz/wp-includes/images/smilies/icon_biggrin.gif' alt=':-D' class='wp-smiley' /> XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');" /&gt;</pre>
<p>Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal <a href="http://www.webmasterpro.de/coding/article/png-bilder-in-aelteren-internet-explorer-versionen-richtig-darstellen-lassen.html" onclick="pageTracker._trackPageview('/outgoing/www.webmasterpro.de/coding/article/png-bilder-in-aelteren-internet-explorer-versionen-richtig-darstellen-lassen.html?referer=');">WebmasterPro.de</a> und <a href="http://datentechniker.info/?articles/css/IE6PNGs" onclick="pageTracker._trackPageview('/outgoing/datentechniker.info/?articles/css/IE6PNGs&amp;referer=');">.devSOURCE</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bissinger.biz/transparente-pngs-fur-den-internet-explorer-6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

