IE sporadically showing pngs

**aka Robbie** · 08-09-2007, 01:00 PM

This one is really starting to get to me. On one page IE shows the image, on another page on the same site it doesn't.

Here's one example:
Have a look at http://www.metadigm.co.uk/resources/swareevals.php and click on the Fortinet logo. To the right of those three evaluations should be three images. The exact same three images as can be found if you go to http://www.metadigm.co.uk/partners/fortinet/index.php and click on the "request evaluations" in the resources box on the right.

Another example can be found here:
If you look at http://www.metadigm.co.uk/aboutus/events.php you'll notice that the tables are all nice and neat. Have a look at the table on this page http://www.metadigm.co.uk/support/supportinfo.php and you'll see it looks terrible, even though the images for the table are from the same css script.

I am really puzzled as to what is happening. Anyone got any ideas of how to fix it?

**jscheuer1** · 08-10-2007, 03:43 AM

It's most likely nothing to do with the .png's, rather the layout/css. Try substituting .gif into the exact same layout, as a test.

**jscheuer1** · 08-10-2007, 05:07 AM

I looked into this a bit further and it is your:

Code:

<script defer type="text/javascript" language="JavaScript" src="/js/png_fix.js"></script>

script that is causing this. The script shouldn't even be being applied in IE 7, the tag should look like so:

Code:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

However, as well or as poorly as this script is written, it is not working as desired on your page in IE 6 either, at least as far as I can tell.

This script isn't required if your .png images do not use alpha channel transparency. As far as I can see, the Fortinet png's don't, although part of your menu's decoration looks as though it may.

I'd look into a finding a way to get the script to exclude processing the png's that are 'disappearing'.

**jscheuer1** · 08-10-2007, 06:27 AM

One way to do what I am suggesting is to edit (with a text editor like notepad) the script png_fix.js so that it looks like so (additions/changes red):

Code:

/*
 
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)) 
{
var re=new RegExp('\\bexclude\\b');
   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"&&!re.test(img.className))
      {
         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
      }
   }
}

This will allow you to add the class name 'exclude' to png images that you don't want this effect applied to, example:

HTML Code:

<img src="some.png" class="exclude">

You can even add it to an existing class designation:

Code:

<img src="/images/pagelayout/maincontent/partners/fortinet/evals/forticlient_pc.png" width="70" 
height="91" border="0" align="left" class="imgpaddingright exclude">

You should still make the script call in the head look like so:

Code:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

to avoid its being used by IE 7 at all, which doesn't need to use it.

Thread: IE sporadically showing pngs

Thread Tools

Search Thread

IE sporadically showing pngs

Bookmarks

Bookmarks

Posting Permissions