ie6 PNG fix causing 24 bit PNG images not to scroll when nested in div with overflow auto

Question

I am using the following PNG fix for IE6:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

It is referenced thus in the head of my document:

<!--[if lt IE 7]>
<script type="text/JavaScript" src="../../Scripts/DD_belatedPNG_0.0.8a-min.js" defer="defer"></script>
<script type="text/JavaScript" src="../../Scripts/DD_PNG_listing.js" defer="defer"></script>
<![endif]--> 

It is also referenced after any jQuery scripts etc.

I have a table which has images that are 24 bit PNG files in it. This table is nested in a div with overflow:auto for scrolling once the table content extends beyond the height of the containing div.

Example table row:

    <tr class="odd">
    <th scope="row">
        <input type="checkbox" value="" name="check1b" id="check1b">
    </th>
    <td>
        CIF NWE

    </td>
    <td>
        USD/MT
    </td>
    <td>

        <img height="6" width="7" alt="Price movement indicator: Down" src="/content/images/icons/icons_red_down_arrow.png">

    </td>
    <td>
        -1.00

    </td>
    <td>
        1107.00
-1120.00

    </td>
    <td>

        <img height="6" width="7" alt="Price movement indicator: Down" src="/content/images/icons/icons_red_down_arrow.png">

    </td>
    <td>
        -2.00

    </td>
    <td>

<a href="#" class="spot_quote">
    SPOT
    Quote </a>
    </td>
</tr>

The issue in IE6 is that when i scroll the div the PNG images stay put and do not scroll with the rest of the table content.

Any ideas.

Answer 1

That particular PNG fix script works in a complex way involving VML. Presumably that's not compatible with the overflow effect.

Try a different script; there are plenty to choose from. Go for a simple one, as just to replace a couple of unscaled, untiled images there is no need for any of the more advanced scripts.

Answer 2

Since you've already got jQuery on the page, you might try a jQuery-based fix: http://jquery.andreaseberhard.de/pngFix/. You may also try this one: http://www.ideashower.com/our_solutions/png-hover/.

But I really don't like any of the AlphaImageLoader filter based solutions. I just use a .GIF, with the edges matted to the background color, and that works pretty well for me.

Let us know what works!