IE png transparency - easiest fix?

Content
1

Anyone know any simple fixes for IE lack of support for transparent png images?

I’ve tried a few this afternoon and can’t get them to work.

2

Thank you for the thorough explanation/answer.

3

Here is an example:

iepngtrans

The main problem would appear to be the CSS class I am applying to the image. Without it the png works fine:

a.linkopacity img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
-khtml-opacity: 0.4;
}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

4

You mean IE6 specifically since IE7 8 and 9 do not have any issues with PNG transparency.

5

Yes, none of the PNG fixes make the :hover effect work.

If you can live with only IE6 not having a :hover effect, then you could do something like this:

body {
    font:9px Verdana, Arial, Helvetica, sans-serif;
    margin: 20px 0 0 0;
    padding: 0;
    background: #ddd url(bg.jpg) repeat-x fixed top left;
    color: #666;
    behavior: url(csshover3.htc); 
}

a.linkopacity img {
    filter:alpha(opacity=30);
    opacity: 0.4;
}

a.linkopacity:hover img {
    filter:alpha(opacity=100);
    opacity: 1;
}

The behavior in the body allows other versions of IE to support any element to have the :hover pseudo class. This makes your text work in versions > IE6. See here for further information: http://www.xs4all.nl/~peterned/csshover.html

And the Javascript for the head:

<script type="text/javascript" src="dd_belatedPNG.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('a.linkopacity img');
</script>

The simplest solution, albeit a little less sophisticated, would be to create your text image and save that in 8-bit PNG format. Before saving it, add a 1px border to the text that matches the color of your background image so that the border won’t be visible. That way you have smooth outlines around the text and don’t need any hacks and can do away with all that superfluous code.

This only makes sense if you have less than a handful of images that require such treatment, obviously.

See the example with a border around the image (works in all browser versions):

http://rockatee.com/temp/ie-transparency.html

It has a light blue outline that is close to the color of your sky background image and the outline is barely visible.

6

The transparency issue is only for 24bit PNG, make sure that you need 24bit transparency before going through hoops to make it work on IE6. 8bit transparency works like in all other browsers

7

Thanks for the tips.

But damn IE. To hell.

8

Can you post the page where it doesn’t work? If at all, you should only encounter issues in IE6 with having your PNGs render with a light blue background. It is correct though that there’s no true Alpha-transparency support in IE7 and IE8 either. And that’s another reason why the DD_belated_PNG Javascript solution is one I’d use for all versions of IE if I need this type of precision.

9

Yes…and no.

I can’t apply the css link style image opacity to png images at all in IE. I’ll post an example later.

I probably should be using a gif image. Not sure…learning fast but.

10

I saw that one whilst Googling. I forget which other ones I tried but I’ll give this one a go as it’s probably popular for a good reason.

Thanks.

11

Which have you tried? This seems to be the most popular:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

12

Yes, the one Ralph linked to is currently the best solution out there. Before that it used to be Twinhelix’ solution, but it’s got more problems than DD_belatedPNG. Most significantly, the latter supports nested positioned elements (which Twinhelix does not), allows you to set x and y coordinates on background image positions and comes at only 7kb instead of 40kb in weight!

13

Doh the problem was I had link/image opacity on the png. All good now.

I hate IE. Forever.