ie6 PNG fix causing 24 bit PNG images not to scroll when nested in div with overflow auto
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.
add position:relative to div with overflow-y:auto (the parent div)
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.
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!
精彩评论