After finish editing my site, I tried to check what it looks with other browsers. It works well, but the when I did checked it using Internet Explorer 6 (IE6), my site looked so bad. My PNG files are having trouble displaying it's transparency, and after researching it seems that IE6 are having issues with PNG's transparency. The transparent background displays a grayish bar which lessens the site's design.
I tried many of the IE6 PNG fixes, but I couldn't get them into work and most of them are CSS hacks that deals with the Alpha Transparency of the PNG files.
After many tries, I've came upon IE PNG Fix by TwinHelix and finally fix the transparency issues of my website in IE6.
Fixing your site with Internet Explorer PNG Fix.
What is IE PNG Fix?
It adds PNG support to Microsoft Internet Explorer (IE) versions 5.5 and 6.0 without having to change anything to the HTML document itself. It supports features like:
* Fixing the transparency for PNGs in your webpage.
* Added support for image source or <IMG SRC=""> elements.
* Let's you have background on your PNG images (unlike many other scripts or fixes in PNG!)
* Your background pictures or images can be modified using inline or in external stylesheets or CSS.
* Automatically handles changed SRC/background by normal JavaScript (e.g. mouseover rollovers) -- no special coding or difficult coding needed.
* Includes supports in CSS 'className' changes on elements.
* Automatic help for links or <a href=""> elements within PNG-background or PNG files elements.
* Tiny script and small on size(for fast downloads).
* It is free!
How To Use
Follow these simple steps to add this to your page:
1. Place the iepngfix.htc and blank.gif into your website folder.
2. Put this code into your website's CSS or HTML:
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
That CSS selector must include the tags or elements on which you want PNG support -- basically, just put a list of tags that you are using and seperate it with a comma. You must also include the correct path to the .HTC file relative to the HTML document location (not relative to the CSS document!). For example, yours may look like this:
<style type="text/css">
img, div, a, input { behavior: url(/css/files/iepngfix.htc) }
</style>
3. If your website uses subfolders, open the IEPNGFIX.HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like for example:
var blankImg = '/images/blank.gif';
If you are interested in more details, check out their site for more information.
Alternatively you can download the latest browsers: Internet Explorer 8 (IE8), Firefox 3 and Google Chrome.