If you have ever opened a webpage with a transparent PNG in Internet Explorer 6, you will see an obvious problem. The images do not appear transparent but adopts a light blue background. which is unsightly to say the least. This is the purpose of the PNGfix, to allow transparent PNG images to work correctly in the web browser Internet Explorer 6. A common way around this is to use a range of different Joomla! extensions which can be applied to your site.

Integrate the PNGfix

If you wish to integrate the PNGfix into the template, you have to edit the index.php. In most RocketTheme templates, you will see the following code which loads an Internet Explorer 6 specific stylesheet. If the exact code below is not present, search for the  tag.

/css/template_ie6.css" rel="stylesheet" type="text/css" />

If the code described above is present, simply change it to conform to the snippet below.

img { behavior: url(/templates/ getTemplate(); ?> /css/iepngfix.htc); } /css/template_ie6.css" rel="stylesheet" type="text/css" />

If the Internet Explorer 6 specific code is not in the index.php, you need to add the following. Ensure this is between the ... tags which are located in the top section of the index.php file.

img { behavior: url(/templates/ getTemplate(); ?> /css/iepngfix.htc); }

You will notice that the quote above loads a file called iepngfix.htc. This is the file which actually corrects any transparency problems with Internet Explorer 6 and its predecessors. Therefore, to finish the integration process, you will need to transfer the file, iepngfix.htc  from the relevant template into the /css directory in your new template.

Solutions for PNGfix issues

However, the PNGfix causes problems with PNG images that have need been defined in respects to their dimensions (width and height). The images then become bloated and look highly distorted. As always, there are simple methods around this.

As illustrated earlier, undefined PNG images come into conflict with the PNGfix. There are a range of simple solutions to correct this problem

Define the width and height in the  HTML code

In the situation where you have bloated PNG images inside content items, the procedure to correct is simple. First, enter your content item in the Joomla! administrator. Next, select the HTML icon on the content toolbar - this only applies if you use a content editor such as TinyMCE.

Find your code which should appear similar to . Change this to  .

The height and widths are defined in terms of pixels so alter the number 100 accordingly

Change the PNG to another format

This solutions is most applicable to the Joomla! default extensions such as the Syndicate Module. We basically convert the .png images to something which will not cause problems such as .gif. Rename the images from image.png to image.gif and change the references in the module files. 

To take an example, the bloated PNG from the Joomla! Syndicate module is called opml.pngwhich resides in the /images/M_images directory on your Joomla! install. Rename this toopml.gif. Now edit the file mod_rssfeed.php located in the /modules folder on your site. Locate opml.png and rename to opml.gif. Save then upload

Transparent PNGs without the PNGfix

The transparent PNG image illustrated earlier are what are called PNG32. These are high quaility PNG images. However, you can have transparent PNG images in PNG8-bit format which do appear in IE6 correctly. There is a reason against this in certain circumstances as the quality is reduced dramatically. Only small images or icons work well in PNG8-bit format. 
The best way to choose between PNG images is with Adobe Fireworks. In this image editing program, select PNG8 from the dropdown menu which is placed in the side toolbar called, Optimise and Align.

 

 

---

Resource: http://tutorials.rockettheme.com/joomla-tutorials/template-tutorials/pngfix.html