Advertisement

PMDStyles RegistrationPMDStyles Recommends DreamHost
Internet Explorer PNG Fix PDF Print E-mail
When we were adding content to the our website, we used some best quality images and icons in PNG format. Because PNG is an extensible file format for the lossless, portable, well-compressed storage of raster images. Another reason for using the PNG format, was that we were having issues with the transparencies of GIF images especially when we were trying to add shadow on icons and images. We got white areas around the shadows which looked rubbish when placing them over coloured backgrounds.

PNG was best available option as it promised to do away with these issues - and certainly within Opera and FireFox it did. But unfortunately Microsoft in all it's wisdom had not implemented the PNG transparencies format properly and we were left dealing with a grey/blue background behind all PNG images.

They we tried to findout a solution for this problem and we found our answer on Google, and the code snippet below was the most elegant aboung what we found...

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG()
{
   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
      }
   }
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Place the above code in the <head> ... </head> area of your templates, and your blue/grey PNG backgrounds will disappear!  There is a slight delay between loading the page and the PNG transparencies displaying properly - but nothing dramatic.
Sunday, 17 June 2007
 

Latest News

Corporate Business type websites are interestingly popular, however not usually because of their design. Business websites have a stereotype to be simple without any fancy features. The same concept has been used for our latest phpMyDirectory template. The template VIVA was created to provide a beautiful design focused on elegance, variety and typography. It makes a great basis for any site that ...
We look out for our customers requests, and we heard many members interested in a artistic template. PMDStyles presents an artistic yet professional template 'Frescos'. Frescos helps us to see how beautiful a phpMyDirectory template can be. Frescos features a fresh, stylish new look and also a CSS based template that uses minimal tables to control the layout, this allows for increased perform...
Are you looking for a good template for your personal directory or a business directory? Our new template Nova has been released. The design team keep it came in a simple and clean way, simple to use and simple to customize. The boring phpMyDirectory traditional homepage has been completely replaced by neat and eye-catching CSS based layout. Nova is a very clean design that really shows off th...
PMDStyles unleashes the next powerful Web 2.0 template: Neon! Neon comes packed with a lot of new eye-catching features. This exciting new template features a clean and simple design and plenty of PMDStyles horsepower under the hood. Maximum flexibility and a plethora of typography and module variations give this subtle design the power needed to make any content look amazing. Neon is has bee...
The much awaited "Edge" is now ready for its debut. You will find "Edge" to be sleek, highly appealing and on the cutting "Edge" of technology. Due to some technical issues in the text color changer, we had to abandon this feature at this time so as to get this outstanding template off and running. We will keep working on the issues for the color changer and perhaps release it in the next templa...

Client Login

Forgot Password? | Signup Now!