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.
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 <!--[if lte IE6]> tag.
<!--[if lte IE 6]>
<link href="<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?>
/css/template_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
If the code described above is present, simply change it to conform to the snippet below.
<!--[if lte IE 6]>
<style type="text/css">
img { behavior: url(<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?>
/css/iepngfix.htc); }
</style>
<link href="<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?>
/css/template_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
If the Internet Explorer 6 specific code is not in the index.php, you need to add the following. Ensure this is between the <head>...</head> tags which are located in the top section of the index.php file.
<!--[if lte IE 6]>
<style type="text/css">
img { behavior: url(<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?>
/css/iepngfix.htc); }
</style>
<![endif]-->
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. If you are a RocketTheme Club Member, this file is located in the /css directory in all templates that have been released after and including ColorMatic. 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.
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 <img> 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 <img> code which should appear similar to <img src="image url" >. Change this to <img src="image url" width="100" height="199"> . 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.png which resides in the /images/M_images directory on your Joomla! install. Rename this to opml.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.
In regards to the problematic Joomla! core extensions, there is a collection of altered files and images that are available here
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.
|
