For a long time I have been bothered by the fact that to getting a nice transparent effect on PNGs working in IE6 doesn’t work. It leaves a nasty grey background to the image where in Firefox you would see through to the background.
Recently after a quick search around, I found a solution to all my problems in the form of a PNG fix. I wanted to use PNGs to create image links on a site. Having one that I could overlay on differing backgrounds was going to be a bonus and would save a lot of time. The design also had a dropdwon menu with a transparent gradient on it. It needed to work in all browsers as this was part of the specification, so I started searching Google for answers.
The very first thing that came up in my search seemed to have the answer I needed. A javascript file that sorted the probelm for me.
The site I got the fix from is http://homepage.ntlworld.com/bobosola/ and is worth checking out for more detail. I’ll briefly run through how to use the fix.
The main advantage of using PNGs is to get the alpha transparency going. There is also the option of two-dimensional interlacing which produces profressive display.
Adavantages of using a GIF are that they are more widelysupported. It also supports animation and everbody loves animated GIFs….right? 🙂
1. Download the png_fix file that can be found here.
2. Insert the code below into the page you want the PNGs fixing.
<!–[if IE 6]>
<script type=”text/javascript” src=”pngfix.js”></script>
<script type=”text/javascript”>
DD_belatedPNG.fix(‘.png_bg’);
</script>
<![endif]–>
You can name the class inside the function call anything you like.
3. Then simple apply the class ‘png_bg’ to the element you want the transparency to work on. For example on an image <img src=’image.png’ alt=” class=’png_bg’ />
An example of the menu I did with the PNG fix can be found here on a work in progress site we are doing at 9xb. If you hover over ‘Venues’ in the main menu, you will see the dropdown in action. It also uses the fix on the semi-transparent overlay in the main box and on a few PNGs throughout.