I recently released a new Wordpress theme for my blog and tested it out in various browsers. Thanks to all my commentators who pointed out issues and even suggested changes for making the theme better.

The one issue that no one pointed out to me was the transparency issue with my logo image in IE6. The logo image was looking a little weird in IE6 browsers. I could not figure out as to why it was happening but a quick Google search and I came across what the problem was and how to resolve it.

Here is how my logo looked in IE6 before the fix.

After the fix

The problem according to many sites is that

The problem is that the most popular browser – Internet Explorer 6- for Windows – does not natively understand Alpha transparency, even though Gecko browsers, KHTML browsers, Opera, Internet Explorer Mac and several minor browsers all do. It displays normal PNGs correctly, and version 4 and up can handle binary transparency if the palette is saved with the image, but as soon as any Alpha transparency is applied, the transparency is replaced with the image’s background colour. This is what Internet Explorer 6- normally shows when a PNG image with alpha transparency is placed over another image.

How did I fix the issue?

Using a simple style sheet hack allowed me to fix the transparency issue for IE6.

<!--[if gte IE 5.5]>

<![if lt IE 7]>

<style type="text/css">

#logoimg img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }

#logoimg { display: inline-block; }

#logoimg { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

                    src='<?php bloginfo('siteurl'); ?>/images/techie-logo-new.png'); }

</style>

<![endif]>

<![endif]-->

Here is the code I used for my image.

<div id="logo">

    <h1 id="logoimg"><a href="http://techie-buzz.com" title="Techie Buzz">

    <img src="http://cache.techie-buzz.com/images/techie-logo-new.png"

                alt="Techie Buzz, know your technology head on" border="0"  /></a>

    <img src="http://cache.techie-buzz.com/images/spacer.gif"

                alt="spacer" width="1" height="20" border="0"></h1>

</div>

In the above CSS code it is checking if the browser version is greater than IE 5.5 and less than IE 7. If the condition is met the style to apply opacity to the images is applied and the image is loaded properly.

In the second section I just gave the h1 tag that is holding my logo image an id that matches the style. So when then browser is IE6 using the style hack above the transparency issue is fixed and the image gets displayed properly.

To get extensive information about this issue you can visit the tutorial on Making Internet Explorer use PNG Alpha transparency.

Have you ever come across such problem? What have you used to solve it? Do let me know through your valuable comments.