View Full Version : XX items remaining in IE 6

08-29-2007, 10:09 PM
I'm using the pngfix.js file (http://homepage.ntlworld.com/bobosola/index.htm) to allow alpha transparencies in IE6. It works great, however, the page with the .png always says "2 items remaining" even though the images have successfully loaded. Does anyone know how I can tell the HTML that the images were loaded successfully and get rid of that "2 items remaining" annoyance?

Here is the pngfix.js code:

// JavaScript Document

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>


var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
for(var i=0; i<document.images.length; i++)
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='image');\"></span>"
img.outerHTML = strNewHTML
i = i-1

and here is the authors explanation for the code.

"If used inline, the code runs after any existing onLoad code has completed. If used as an include file, the DEFER keyword ensures it is run when the DOM has loaded, but before the images are rendered. It converts each PNG image into a span with the PNG's width and height attributes. The IE 5.5+ AlphaImageLoader filter is then applied to fill each new span with the original image. It is this filter which allows PNG transparency to work correctly - see KB 294714 for more details. Alt attributes are converted to titles for mouse hover text. Any existing in-line CSS declarations plus title, ID & class attributes are transferred to the new spans.

Each new span has the declaration display:inline-block added - this enables the fix to work with "Standards mode" IE6 Doctypes. Finally, each replaced PNG is checked to see if it has the (deprecated) align="left" or align="right" attribute. If so, an appropriate CSS float declaration is added in-line in order to replicate the original alignment. Also, if the original image was used within an anchor as a link, then a hand cursor is applied to the new span in order to replicate the original link image cursor."

I think the problem has something to do with the images being wrapped in <span> tags in the .js file.

Any help would be greatly appreciated.

08-30-2007, 01:17 AM
Can someone please help me?

Arty Effem
08-30-2007, 01:47 AM
Can someone please help me?Not without a URL. So far all you've shown is a piece of proven code.