PullMonkey Blog

Archive for the ‘IE hacks’ Category:


28 Apr

PNG Transparency in IE


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:

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.

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):

The code:



<img src="/images/pullmonkey_logo.png">

Applying the fix for IE (note that unfortunately this does not work in firefox):

1
2
3
4


<DIV ID="oDiv" STYLE="position:relative; height:78px; width:353px;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/pullmonkey_logo.png', sizingMethod='scale');" >
</DIV>

The code:

1
2
3
4
5
6
7

      <DIV ID="oDiv" 
        STYLE="position:relative; 
               height:78px; 
               width:353px;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src='/images/pullmonkey_logo.png', sizingMethod='scale');" >
      </DIV>

Ok good, so we can make it work in IE and firefox but with different solutions.
The fix in IE does not work in firefox and likewise the firefox solution does not handle transparencies in IE.

The solution is to put everything in CSS and use the * html IE hack:
Here is my solution:
The header where the image is displayed:

1
2
3
4
5
6
7
8
9

    <div id="header">
      <h1>
        <a href="/">
          <img src="/images/pullmonkey_logo.png" />
        </a>
      </h1>
      <div ID="pullmonkey_logo_ie">
      </div>
    </div>

The CSS to hide the regular image from IE:

1
2
3

    * html #header img {
      display: none;
    }

The CSS to do the directx transparency:

1
2
3
4
5
6
7

  * html div#pullmonkey_logo_ie {
    position:relative;
    height:78px;
    width:353px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='/images/pullmonkey_logo.png');
  }

Applying the stylesheet:



<div id="header_demo"><a href="/"><img src="/images/pullmonkey_logo.png" /><div ID="pullmonkey_logo_ie"></div></a></div>

So there it is, see that it shows up transparently in both IE and Firefox.


Comments Off on PNG Transparency in IE Filed under: Home, IE hacks