issue with png transparency IE8

pnet · by **pnet** on Wed Aug 05, 2009 3:47 am

Hi,

While most PNG alpha issues are with versions before IE7, I am facing an issue with IE8 and a 32-bit PNG file (or even 8-bit) that contains alpha. The screenshot attached

: blackborder.png (3.03 KiB) Viewed 5341 times

shows the black outline for a hover-on menu item when tested in IE8. I've also attached the actual PNG image for your reference

: mega_bg_hosting.png (2.07 KiB) Viewed 5322 times

. The relevant CSS is as follows:

Line number On/Off | Expand/Contract | Select all

#subMenusContainer ul#hosting {
        width: 486px;
        height: 225px;
        background: transparent url("../images/menu/mega_bg_hosting.png") no-repeat 0 0;
         z-index: 500;
        }

The relevant HTML section:

Line number On/Off | Expand/Contract | Select all

 
<li id="hosting"><a href="#">Anabantoidei</a>
     <ul id="hosting">
          <div>
                 <a href="BUSINESS">Business</a><br />
        <a href="INVITATION">Social &amp; Invitation</a><br />
        <a href="SHIPPING">Shipping &amp; Packaging</a><br />
        <a href="MOST_POPULAR">Most Popular</a>
        </div>
    </ul>
</li>
        

The PNG works fine in Firefox, but shows the ugly black outline in IE8. I tried everything, from using the "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='images/menu/mega_bg_hosting.png');" CSS style, to the FixPNG javascript from clientcide.com (it only works for IE6 and below, so can't see any results for IE8) and others. I don't know how to fix this at all, and I suspect it's because of the fact that the background-image is being used during hover state, unlike most conventional uses.

Any ideas how to fix this? Thanks for any help!

-pnet

Fli7e · by **Fli7e** on Thu Aug 20, 2009 1:30 pm

Well, the problem itself is that MSIE applies the alpha channel to a virtual backgroundcolor if not set or set to transparent (whyever this evil engine is about) ...

I know this is not a fix but just some information about the reason.

Maybe you could try to add this meta tag to bypass the IE8 behaviour:

Line number On/Off | Expand/Contract | Select all

<meta http-equiv="X-UA-Compatible" content="IE=7">

Other than this .. i never came across a good solution - maybe using MSIE behaviours ...

keif · by **keif** on Wed Aug 26, 2009 4:04 pm

Is your PNG on top of a solid color background? If so, add that background color to the background of your PNG (so not "transparent" but "#fff" or whatever).

This has been an issue with IE for awhile - sadly, a set background color seems to be the only fix.

issue with png transparency IE8

issue with png transparency IE8

Re: issue with png transparency IE8

Re: issue with png transparency IE8

Who is online