Problems with transparent PNG + alpha filter under IE6&7

**telemach** · Nov 25, 2007, 09:09

I want to apply alpha opacity filter to transparent PNG file however I stumble a serious problems under IE6 and IE7 because one doesn't want to display transparency and the second displays sharp edgy inner corners.

This is an example image

http://hdd001.republika.pl/test8.png

here is a html

Code:

<div class="example"></div>

and CSS

Code:

.example {
background-image: url(test8.png);
background-repeat: repeat-y;
filter:alpha(opacity=65);
-moz-opacity:.65;
opacity:.65;
opacity:0.65;
}

Firefox and Safari display this fine however :

IE6 - corners are smooth but no transparency
IE7 - corners are sharp and bad looking, transparency is OK

I wanted to use iepngfix.htc or AlphaImageLoader but it looks it doesn't like background images.

any solution ?

**holmescreek** · Nov 25, 2007, 09:32

IE6 doesn't support PNG transparency. You will need to use a .gif.

**telemach** · Nov 25, 2007, 09:35

Originally Posted by holmescreek

IE6 doesn't support PNG transparency. You will need to use a .gif.

not natively but this is why iepngfix.htc was introduced and using gif is no option as sharp edges are something present in every single browser

**holmescreek** · Nov 25, 2007, 09:44

Take a look at this article :

http://bjorkoy.com/past/2007/4/8/the...st_way_to_png/

**telemach** · Nov 25, 2007, 09:49

Originally Posted by holmescreek

Take a look at this article :

http://bjorkoy.com/past/2007/4/8/the...st_way_to_png/

It looks like you don't understand my problem, I need transparency+opacity+smooth edges, all in the same time under IE.

Try to use what is written in this article and then apply alpha filter.

**Paul O'B** · Nov 25, 2007, 10:02

Hi,

First of all IE needs the element to have "haslayout" before the op-acity filter will work.

IE6 can only crop, scale or leave at image size when you use the alpha image loader filter. It cannot position or repeat.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
background:red
}
.example {
background: url(http://hdd001.republika.pl/test8.png) repeat-y;
filter:alpha(opacity=65);
-moz-opacity:.65;
opacity:.65;
opacity:0.65;
width:100&#37;;/* IE needs layuot*/
}

* html .example{
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hdd001.republika.pl/test8.png',sizingMethod='scale');
}


</style>
</head>
<body>
<div class="example">
    <p>this is some text : this is some text : </p>
    <p>this is some text : this is some text : </p>
    <p>this is some text : this is some text : </p>
    <p>this is some text : this is some text : </p>
</div>
</body>
</html>

However that won't be any good because the image will be stretched.

Look at this example as to what you can do.

http://www.pmob.co.uk/temp/transparent-test4.htm

The borders and the image have the filter applied but the borders are scaled so there is limited scope for using the fliter for any other uses.

I would need to see your design to decide if it was possible or not but it sounds like its not possible for IE6.

IE7 should understand png transparency ok.

**brandaggio** · Nov 25, 2007, 10:04

I used this fix recently and it worked it pretty well, though it does have some issues depending on how the background image is applied/used (as Paul alluded to above - it won't work in all situations).

If you carefully choose the matte color you can sometimes get away with an alpha transparent GIF, but I know it can be to much of a compromise for some situations.

^Is anyone aware of an IE 6 PNG fix that will allow you to position and/or repeat the background?

**Paul O'B** · Nov 25, 2007, 10:53

Is anyone aware of an IE 6 PNG fix that will allow you to position and/or repeat the background?

No, It's not possible I'm afraid. All you can do is set the sizingMethod attribute of the alpha filter to crop, scale or image. There is no solution for positioning or repeating in IE6 and under.

**brandaggio** · Nov 25, 2007, 11:00

^That's what I was afraid of - I hadn't found anything and I dug around fairly thoroughly - of course to the boss who insists it must look exactly like the super rich, multi-overlayed, shadowed and glowed comp that the stakeholders bought into doesn't care much

.

Sometimes no means no,

- even if you are used to never hearing it (hear me boss man?!). Apparently there is indeed not a publicly available complete hack/fix for every situation - sometimes we all need to be reminded of that I suppose.

Ah, the bittersweet taste of compromise.

**telemach** · Nov 25, 2007, 11:06

OK this is an example of a layout

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
body{ background-image: url('http://hdd001.republika.pl/bgtest.gif');}

.a {
background: url(http://hdd001.republika.pl/test8.png) repeat-y;
filter:alpha(opacity=65);
-moz-opacity:.65;
opacity:.65;
opacity:0.65;
width:38px;
height:200px;
float:left;
display:inline;
margin:0px
}

.b{width:200px;background:green;display:inline;float:left;margin:0px}

</style>

</head>

<body>

<div>

<div class="a"></div>
<div class="b">bbbb</div>

</div>



</body>
</html>

I understand that eliminating white spots while having an opacity is not possible so I wonder if I can do something to that ugly edges in IE7

I've add this to the <style>

Code:

img{ 
   behavior: url(iepngfix.htc); 
   }

* html .a{
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hdd001.republika.pl/test8.png');
}

but this is bad, however if div multiplying would be possible, who knows maybe it could work

**Paul O'B** · Nov 25, 2007, 11:48

I understand that eliminating white spots while having an opacity is not possible so I wonder if I can do something to that ugly edges in IE7

This seems to be a bug in ie7 where you are applying a png image at the same time as using opacity filter. If you remove the opacity filter then the pngs display: properly.

Maybe you could use a transparent background png on a parent instead to get the effect you want instead of using filter:alpha(opacity=65);.

Also note that the png fix is just for ie6 so make sure you are only giving ie6 (and ie5.5) the pngfix.

**telemach** · Nov 25, 2007, 12:46

Originally Posted by Paul O'B

This seems to be a bug in ie7 where you are applying a png image at the same time as using opacity filter.

Do you think I should report it ?

Originally Posted by Paul O'B

Maybe you could use a transparent background png on a parent instead to get the effect you want instead of using filter:alpha(opacity=65);.

yes I'm doing it right now but it's not exactly the solution I need

Originally Posted by Paul O'B

Also note that the png fix is just for ie6 so make sure you are only giving ie6 (and ie5.5) the pngfix.

I'm aware of that fact and for the present moment I see only this solution :

Special graphics for IE7 or switching to opacity PNGs only + GIFs for IE6

**Paul O'B** · Nov 25, 2007, 16:40

Do you think I should report it ?

lol -only if you want to waste your time

Just remember it for next time and keep it with a list of all the bugs you come across so you don't have to keep remembering what they were. I've seen the same bug mentioned on other forums so its a known issue.

I'm aware of that fact and for the present moment I see only this solution :

Without seeing what the finished product should look like I can't really make a suggestion. I'm not sure why you can't use a transparent background png on a parent to give you the opacity effect. The benefits would be that the foreground content won't be made opaque which is usually what's wanted.

**telemach** · Nov 25, 2007, 17:03

Originally Posted by Paul O'B

I'm not sure why you can't use a transparent background png on a parent to give you the opacity effect. The benefits would be that the foreground content won't be made opaque which is usually what's wanted.

I'm not sure I'm following your ideas without some example code.
Right now it is just an IE6 and lower that need some extra coding, I can live with that and as soon as I'll finish my design you will understand my goals.

The SitePoint Forums have moved.

User Tag List

Thread: Problems with transparent PNG + alpha filter under IE6&7

Thread Tools

Display

Problems with transparent PNG + alpha filter under IE6&7

Bookmarks

Bookmarks

Posting Permissions