Displaying PNG in IE

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	Display PNG images with transparency in IE.

Suggested below is a several step technique for preparing images for web. It enables to reduce file size and display PNG fairly well in IE lower or equal to 5.5. Drawbacks: complexity and limited palette of GIF colors.

How it looks in the browser

<style type="text/css">
    #body_png
    {
        background-image: url('grid-10.gif');
        padding: 1em;
    }
    #body_png img
    {
        vertical-align: middle;
    }
    .png
    {
        //background-image: none ! important;
        /*
            do not forget that expression
            behavior: url(...)
            requires absolute path
        */
        behavior: url('pngfix.htc');
    }
</style>
<div id="body_png">
    <img
        src="logo.png"
        width="175"
        height="135"
        alt="Knorr &reg;"
    />
    +
    <img
        src="logo.gif"
        width="175"
        height="135"
        alt="Knorr &reg;"
    />
    =
    <img
        src="logo.gif"
        style="background-image: url('logo.png');"
        class="png"
        width="175"
        height="135"
        alt="Knorr &reg;"
    />
</div>

Order a design...

Displaying PNG in IE January 2005

How it looks in the browser