{"id":11,"date":"2007-04-28T18:52:00","date_gmt":"2007-04-28T18:52:00","guid":{"rendered":"\/2007\/09\/11\/png-transparency-in-ie"},"modified":"2007-04-28T18:52:00","modified_gmt":"2007-04-28T18:52:00","slug":"png-transparency-in-ie","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2007\/04\/28\/png-transparency-in-ie\/","title":{"rendered":"PNG Transparency in IE"},"content":{"rendered":"<p>For the last few days I have been trying to figure out the best way to handle png transparency in IE.  (my logo is a png)<br \/>\nOf course I checked Google and went to the following sites:<\/p>\n<ul>\n<li><a href=\"http:\/\/alistapart.com\/stories\/pngopacity\/\">http:\/\/alistapart.com\/stories\/pngopacity\/<\/a><\/li>\n<li><a href=\"http:\/\/www.pcmag.com\/article2\/0,1759,1645331,00.asp\">http:\/\/www.pcmag.com\/article2\/0,1759,1645331,00.asp<\/a><\/li>\n<li><a href=\"http:\/\/support.microsoft.com\/kb\/294714\">http:\/\/support.microsoft.com\/kb\/294714<\/a><\/li>\n<\/ul>\n<p>to pretty much learn that IE does not support png transparency and that you have to use a directx filter on your pngs to get them to show correclty in IE.<\/p>\n<p>So first an example.  If you have IE then you will see that this png (should be transparent) does not show correctly (note it works in firefox):<\/p>\n<pre class=\"code\">\n  <img src=\"\/images\/pullmonkey_logo.png\">\n<\/pre>\n<p>The code:<\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre><tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\">&lt;img src=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/images\/pullmonkey_logo.png<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>Applying the fix for IE (note that unfortunately this does not work in firefox):<\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\n<\/tt>&lt;<span class=\"co\">DIV<\/span> <span class=\"co\">ID<\/span>=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">oDiv<\/span><span class=\"dl\">&quot;<\/span><\/span> <span class=\"co\">STYLE<\/span>=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">position:relative; height:78px; width:353px;<tt>\n<\/tt>     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\/images\/pullmonkey_logo.png', sizingMethod='scale');<\/span><span class=\"dl\">&quot;<\/span><\/span> &gt;<tt>\n<\/tt>&lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">DIV&gt;<tt>\n<\/tt><\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>The code:<\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><strong>5<\/strong><tt>\n<\/tt>6<tt>\n<\/tt>7<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\">      &lt;<span class=\"co\">DIV<\/span> <span class=\"co\">ID<\/span>=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">oDiv<\/span><span class=\"dl\">&quot;<\/span><\/span> <tt>\n<\/tt>        <span class=\"co\">STYLE<\/span>=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">position:relative; <tt>\n<\/tt>               height:78px; <tt>\n<\/tt>               width:353px;<tt>\n<\/tt>        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(<tt>\n<\/tt>          src='\/images\/pullmonkey_logo.png', sizingMethod='scale');<\/span><span class=\"dl\">&quot;<\/span><\/span> &gt;<tt>\n<\/tt>      &lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">DIV&gt;<tt>\n<\/tt><\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>Ok good, so we can make it work in IE and firefox but with different solutions.<br \/>\nThe fix in IE does not work in firefox and likewise the firefox solution does not handle transparencies in IE.<\/p>\n<p>The solution is to put everything in CSS and use the * html IE hack:<br \/>\nHere is my solution:<br \/>\n<b>The header where the image is displayed:<\/b><\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><strong>5<\/strong><tt>\n<\/tt>6<tt>\n<\/tt>7<tt>\n<\/tt>8<tt>\n<\/tt>9<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\">    &lt;div id=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">header<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;<tt>\n<\/tt>      &lt;h1&gt;<tt>\n<\/tt>        &lt;a href=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;<tt>\n<\/tt>          &lt;img src=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/images\/pullmonkey_logo.png<\/span><span class=\"dl\">&quot;<\/span><\/span> \/&gt;<tt>\n<\/tt>        &lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">a&gt;<tt>\n<\/tt>      &lt;<\/span><span class=\"dl\">\/<\/span><\/span>h1&gt;<tt>\n<\/tt>      &lt;div <span class=\"co\">ID<\/span>=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">pullmonkey_logo_ie<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;<tt>\n<\/tt>      &lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">div&gt;<tt>\n<\/tt>    &lt;<\/span><span class=\"dl\">\/<\/span><\/span>div&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p><b>The CSS to hide the regular image from IE:<\/b><\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\">    * html <span class=\"c\">#header img {<\/span><tt>\n<\/tt>      display: none;<tt>\n<\/tt>    }<\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p><b>The CSS to do the directx transparency:<\/b><\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><strong>5<\/strong><tt>\n<\/tt>6<tt>\n<\/tt>7<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\">  * html div<span class=\"c\">#pullmonkey_logo_ie {<\/span><tt>\n<\/tt>    position<span class=\"sy\">:relative<\/span>;<tt>\n<\/tt>    height:<span class=\"i\">78<\/span>px;<tt>\n<\/tt>    width:<span class=\"i\">353<\/span>px;<tt>\n<\/tt>    filter<span class=\"sy\">:progid<\/span><span class=\"sy\">:DXImageTransform<\/span>.<span class=\"co\">Microsoft<\/span>.AlphaImageLoader(<tt>\n<\/tt>      src=<span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">\/images\/pullmonkey_logo.png<\/span><span class=\"dl\">'<\/span><\/span>);<tt>\n<\/tt>  }<\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p><b>Applying the stylesheet:<\/b><\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre><tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\">&lt;div id=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">header_demo<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;&lt;a href=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;&lt;img src=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/images\/pullmonkey_logo.png<\/span><span class=\"dl\">&quot;<\/span><\/span> \/&gt;&lt;div <span class=\"co\">ID<\/span>=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">pullmonkey_logo_ie<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;&lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">div&gt;&lt;<\/span><span class=\"dl\">\/<\/span><\/span>a&gt;&lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">div&gt;<\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>\nSo there it is, see that it shows up transparently in both IE and Firefox.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For the last few days I have been trying to figure out the best way to handle png transparency in IE. (my logo is a png) Of course I checked Google and went to the following sites: http:\/\/alistapart.com\/stories\/pngopacity\/ http:\/\/www.pcmag.com\/article2\/0,1759,1645331,00.asp http:\/\/support.microsoft.com\/kb\/294714 to pretty much learn that IE does not support png transparency and that you have [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,7],"tags":[],"_links":{"self":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/11"}],"collection":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":0,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/11\/revisions"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=11"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=11"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}