Some time ago I wrote an article about CSS PNG Fix for IE by Rogie King, from Komodo Media, which is a great fix. But whether you realized it or not, there are some issues with the script if you monitor it closely, and some observant people have also notified me about it.

The problem is it will make repeated background ‘none’ call to your server, which probably shown as page not found or server error message in your access log, though the transparency fix stilll works. And here are some possible scenarios that may trigger that problem:

  • <img> tag linking to other image types other than PNG, e.g. JPEG or GIF images. This can be quite problematic if you use css selector to automatically fix all * html img tags found, you may get a lot of redundant background ‘none’ calls to your server if there are many tags which link to GIF or JPEG images.
  • If you accidentally put 'png' class name from some your elements without stylesheet background image.

So I took closer look at the code, re-formatted so I knew what was going on. There two types of fixes, one for <img> tag, while the other for background images. And it seems background image fix are still called for some of the scenarios above, and calling this.runtimeStyle.backgroundImage="none" was triggering the “none” request to the server. And two fixes that I did:

  • If it is <img> tag and it does not link to a PNG image file, do not perform background image fix, instead just ignore it.
  • If it is a background image fix, and the background image is not a PNG file, ignore it as well.

Here are the updated codes:

* html img,
* html .png {
  azimuth: expression(
    this.pngSet?
      this.pngSet=true : 
        (this.nodeName == "IMG" ? 
          (this.src.toLowerCase().indexOf('.png')>-1 ? 
            (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                this.src = "/images/blank.gif") :
            '') :          
          (this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
            (this.origBg = (this.origBg) ? 
              this.origBg :             
              this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
              this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
              this.runtimeStyle.backgroundImage = "none") :
            ''
        ), this.pngSet=true
  );
}

15 Comments . Comments Feed . Trackback URI
Fri, 23 May 08 04:55 pm . Jeff wrote:

Very nice. Cheers :)

Wed, 2 Jul 08 07:00 pm . Robert wrote:

[Running IE6]
Great fix, but there’s two problems I’m noticing:

- images within the page display properly, but come up with the broken link X on them.

- tables with the png class applied to them, turn up with completely unclickable links

I would appreciate if you would e-mail your comments to me as well…

Mon, 7 Jul 08 01:36 am . Herryanto Siatono wrote:

Robert you are still using the original version, re-download and update your pngfix.css with the pached version.

Tue, 14 Oct 08 09:53 pm . prabhu wrote:

I have applied this to my html page, but this code is not working for background image style which comes from CSS style.

Ami right? or i am implementing in a wrong way?

Tue, 14 Oct 08 09:58 pm . prabhu wrote:

actually this is my code
.pngbg
{
background:URL(trans.png) no-repeat left top;
height:150px;
}
below this i have your CSS png fix styles in my page.
unforunately i couldn’t send my page URL, since that’s a local file.

Tue, 25 Nov 08 03:14 am . Rob wrote:

Great fix! I did find one problem, if you have an tag that has a height/width set, the fix undoes. If you use sizingMethod=’scale’ instead of sizingMethod=’image’ then it fixes the problem.

Sun, 4 Jan 09 01:37 pm . Graphics File Format « Muhammadfauzie’s Blog wrote:

[…] CSS PNG fix (with background call none fix) (CSS) […]

Thu, 26 Feb 09 08:29 am . Ira wrote:

This is great code. I do have one question though. Have you figured out how to get the background image to position correctly? Mine always goes to the top left. Thanks a lot.

Wed, 17 Jun 09 05:53 am . Eduardo wrote:

Helo!

The fix is great, exactly what I was looking for, thanks!

The only thing I see is that when you have an element with “sprite” background, like this:

background-position:0 -10px;

It will fail to set the right coordinates. As far as I could investigate I could change the behaviour with “sizingMethod”, but couldn’t set it right.

Is this actually possible to solve or I just have to use one image file for each background?

Thanks, and congrats. for the blog, you have some really interesting stuff here… I’m glad I found it !

eD

Tue, 18 Aug 09 03:31 pm . Hemant Chanderiya wrote:

Thank You, its really great solution for calling png image.
but i have a 1 question, when i position fixed in the css
it takes defaut left position in IE, waht is it the solution for center align in IE.

Wed, 5 May 10 06:51 am . The Ultimate List of IE6 Fixes & Hacks « blog.mattsparks.com wrote:

[…] PNG Image Fix for IE […]

Mon, 9 Aug 10 09:19 pm . Mrs T-Shirts wrote:

Fix worked a treat. Our IE6 users are now back on line.
Thanks
Heidi

Wed, 15 Dec 10 05:22 pm . Vaishakh wrote:

Hey dude,

Does this CSS will work with background image?

Cheers!
Vaishakh

Wed, 15 Dec 10 06:09 pm . Herryanto Siatono wrote:

Yep it works, note that the bacground position will be reset to 0,0

Thu, 1 Sep 11 08:46 am . The Ultimate List of IE6 Fixes & Hacks | Matt Sparks Blog wrote:

[…] PNG Image Fix for IE […]

Add Your Comment



(optional)