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
  );
}

If you are a web designer, you know that PNG image rocks for its fine transparency support. But lacking of support on IE6 and below, probably has gotten into your nerve at some point of your life.

The journey for PNG image fix on IE has started long ago, and it all voices back to the use of AlphaImageLoader filter hack.

<div style="height:400; width:400; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');"></div>

Some guys wrote Javascript codes to automatically reload PNG images found in image tags with AlphaImageLoader, an example would the pngfix.js by Bob Osola, the first you will find if you search for “PNG fix” on Google.

But the problems with Bob’s script, it fixes only the <img> tags, how about your <div> tags with PNG image background, and if you have small images, like an icon that I had with 12px height, the width and height will be distorted.

That will lead you to find a better solution to solve these two problems, and you may have bumped into TwinHelix IE PNG Fix or other similar solutions.

It fixes both <img> and <div> tags, and solve the width and height distortion through the use of blank.gif. On top of that, it uses a clever way of calling the javacript codes through CSS behavior attribute, supported only by IE, which gives you more choices on which element to fix.

img, div.img {
    behavior: url("pngfix.htc");
}

And human is definitely an amazing creature, whom can not be easily pleased. Two weeks ago, Rogie King from Komodo Media, published a clever way to PNG fix through CSS. Now you do not even need an external file, such as pngifx.js or pngfix.htc.

The concept is similar except it is neater and cleaner, and the javascript codes are compacted and called inline from behavior attribute. After all, PNG images are more of a styling issue, thus putting the fix under CSS seems to make more sense.

* 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.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
  );
}

This is the best I’ve seen so far to solve my PNG image transparency issue, probaby yours too. Thank you Roque.

UPDATE:

Here are the quick step-by-step instructions, as requested by some:

• Download pngfix.css, file created for your convenience.
• Download blank.gif, a transparent 1×1 pixel image to help out with the fix, mouse right click and save it to /images folder.
• If you store blank.gif in other folder other than /images, please edit pngfix.css to relect blank.gif location.
• Copy the following code snippet and paste it in your HTML source codes, inside <head> tag, to load pngfix.css only for IE 6 and below; IE 7 doesn’t have PNG transparency issue.
  

  <!--[if lt IE 7]>
    <link href="/stylesheets/pngfix.css" media="screen" rel="stylesheet" type="text/css" />    
  <![endif]-->
  

• That’s all, for all <img> tags with transparent PNG images will be automatically fixed, while for background images defined in stylesheet, you will need to add "png" class name to the respective elements, e.g. assuming that “flower_bg” defines a transparent PNG background
  

    <div class="flower_bg png">
       Hope you get a clear picture now.
    </div>
  

TIP:

On some cases if you have a lot of <img> tags with only a few of them are transparent images, you can choose to remove * html img selector for performance reason (remember to remove the comma as well). Without that, you would have to add "png” class name for <img> that needs the tranparency fix.

UPDATE 2:

Original script may cause redundant background ‘none’ call to the server, which may be shown as page not found or server error in the access log. I did some fixes which solve this issue, more about this issue can be found here. Here are the updated version, I’ve also updated pngfix.css, the downloadable version.

* 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
  );
}

It was about a year ago when I read a similar article by SYS-CON about the predictions for Internet technology in 2006. That was the time when I read about the prospect of Rails, AJAX, and Web 2.0. That article intriqued my curiousity.

Looking back, a year has passed, I was glad that I jumped ship, and picked up Rails and AJAX, and polished up my Javascripts skills at the same time. The skills will come in handy in 2007, as next year’s prediction is pretty much similar, i.e. expect richer experience in Internet applications, stronger adoption of Linux, and the possibility of Jonathan Schwartz open-sourcing Java. Do you think he will do that? I bet so.

Click here for the predictions of Internet Technology in 2007.

Update: Another article from Readwriteweb.com on 2007 web predictions, touches on vertical search engines, again rich internet apps (watch out for Adobe’s Apollo platform), Interenet based TV and mobile web.

Website has been playing a greater role in the face of business lately, especially with the emergence of blogs and content management system (CMS), companies and individuals have been more upfront about who they are and what they do.

With a high Internet penetration rate in Singapore, 58.9% broadband and 35.5% dial up service in Sep 2006; whether you realized it or not, people do google, and visit your web site before visiting your store. And your site is most likely the first contact with visitors, readers, and potential customers.

Thus what you put up there on your website is important. The design, layout, and content play an important role to build trust with your potential customers.

So what makes a website more trustworthy than others?

It all voices down to the dos and donts in web design. Sourced from User Interface design newsletter, November 2006, published by Human Factors International,
in a study of trust and mistrust of on-line health sites, the design and content were the most prominent factors, specifically as follows:

I was looking for an Interior Design (ID) company some weeks ago for a small flat that I have just bought (Yeah, finally my first home ever). I found out that many of the ID companies, in fact a lot of companies in Singapore, do not pay enough attention to their website. With shoddy design, haphazard layout, and poor content, they are really missing out on potential customers to their competitors.

I ended up visiting IDs whose websites convey trust that they can do a good job for me. And whether you can close the deal, it is now up to you, the customer is now at your door step.