elementalgrace Posted October 29, 2007 Share Posted October 29, 2007 Hi,I haven't done much javascript but need to make the png files appear correctly in IE5.5 with the alpha transparency and have found a workaround on the web that is supposed to work for IE5.5 and IE6. It seems to work in 6 but not IE5.5. I am using a .js include file and referencing it from the header:Reference in HTML <!--[if <IE 7.]><script defer type="text/javascript" src="js/pngfix.js"></script><![endif]--> java script: /* 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><![endif]-->*/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='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } }} If anyone can point out where I'm going wrong, I'd be ever so gratefulCheers Link to comment Share on other sites More sharing options...
boen_robot Posted October 29, 2007 Share Posted October 29, 2007 Well, for one thing, your conditional comment is wrong. You really need to use <!--[if lt IE 7]><script type="text/javascript" src="js/pngfix.js"></script><![endif]--> I don't know where the "defer" came from, and I'm absolutely positive you need to use "lt", not "<". "lt" as this "lt" is not the "& lt;" named entity. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 29, 2007 Share Posted October 29, 2007 <!--[if lt IE 7.]>I don't know if you're supposed to have a period after the version number either. Link to comment Share on other sites More sharing options...
elementalgrace Posted October 30, 2007 Author Share Posted October 30, 2007 Weird, today it's switched and my standalone version of IE6 isn't supporting the opacity but the standalone version of IE5.5 is doing it right. Could it possibly have anything to do with the fact that I am using standalone versions of these browsers?I did change the conditional comment as you suggested, but then it wasn't supported in my versions of either IE6 OR IE5.5 ??? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 30, 2007 Share Posted October 30, 2007 I've always used this, it works fine for me.http://dean.edwards.name/IE7/ Link to comment Share on other sites More sharing options...
elementalgrace Posted October 31, 2007 Author Share Posted October 31, 2007 I've always used this, it works fine for me.http://dean.edwards.name/IE7/ Look, I'm probably being super-thick here but that just looked like gibberish to me. I changed the script tags in the HTML and downloaded the .js file and repointed the link to the .js file and it didn't work in either browser.I don't generally use javascript and it's not making enough sense for me to be able to troubleshoot the problem. All I want is a clear set of instructions that works in IE 5.5 and 6. Would it help if I posted all my code? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 31, 2007 Share Posted October 31, 2007 You need to read the documentation online, here's the installation page for IE7 that shows the script tag to add to your page:http://dean.edwards.name/IE7/install.htmlThat goes in the <head> of the HTML document. There's also this note on the usage page: By default the PNG solution operates on files ending -trans.png. You can override this by setting a global variable as described on the configuration page.This is the configuration page:http://dean.edwards.name/IE7/usage/configure.htmlIt says there is a global variable for choosing which images to make transparent. By default the images need to end with "-trans.png", you can change that to just ".png" if you want it to work on all PNGs. The configuration page doesn't say, but I assume that the file where you change that is either ie7-graphics.js, ie7-core.js, or ie7-standard-p.js.Actually, it doesn't look like you change anything in any of those files. Instead you just define a global variable before you add the script to the page with whatever you want it to be.<script type="text/javascript">var IE7_PNG_SUFFIX = ".png";</script>That would go before the code that they show to add the IE7 script to the page. Link to comment Share on other sites More sharing options...
elementalgrace Posted November 2, 2007 Author Share Posted November 2, 2007 You need to read the documentation online, here's the installation page for IE7 that shows the script tag to add to your page:http://dean.edwards.name/IE7/install.htmlThat goes in the <head> of the HTML document. There's also this note on the usage page:This is the configuration page:http://dean.edwards.name/IE7/usage/configure.htmlIt says there is a global variable for choosing which images to make transparent. By default the images need to end with "-trans.png", you can change that to just ".png" if you want it to work on all PNGs. The configuration page doesn't say, but I assume that the file where you change that is either ie7-graphics.js, ie7-core.js, or ie7-standard-p.js.Actually, it doesn't look like you change anything in any of those files. Instead you just define a global variable before you add the script to the page with whatever you want it to be.<script type="text/javascript">var IE7_PNG_SUFFIX = ".png";</script>That would go before the code that they show to add the IE7 script to the page.But I don't have a problem with IE7. IE7 works fine, as does firefox, safari and opera. It's IE6 I'm struggling with ... Link to comment Share on other sites More sharing options...
boen_robot Posted November 2, 2007 Share Posted November 2, 2007 But I don't have a problem with IE7. IE7 works fine, as does firefox, safari and opera. It's IE6 I'm struggling with ...No no. The name of the JavaScript library is IE7. It was created long before there was even an alpha of IE7 (the browser), so that's where the confusion comes from. So when justsomeguy said "IE7 script" he meant the actual files that you can download from that page, not the IE7 browser. Link to comment Share on other sites More sharing options...
elementalgrace Posted November 7, 2007 Author Share Posted November 7, 2007 No no. The name of the JavaScript library is IE7. It was created long before there was even an alpha of IE7 (the browser), so that's where the confusion comes from. So when justsomeguy said "IE7 script" he meant the actual files that you can download from that page, not the IE7 browser.OK, I ended up using the solution for twinhelix. It still wasn't working right in IE5.5 and IE6. I ended up using Virtual PC and installing variations of IE5.5 and IE6 on different virtual machines. Both of the virtual machines display the code in IE5.5 and IE6, although the standalone versions are still not showing it right, so I can only assume that the standalone versions of IE6 and IE5.5 have a slight quirk in not using alpha transparency. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.