Alpha PNG support in IE7 and 8

I have made some gradient images that are a solid color that fade to transparent. Some of the images are very large, as to be backgrounds.

We also apply a transparency to these pngs. I cannot figure out why IE7 and 8 won't render the PNG's correctly. I have had to resort to using the old AlphaImageLoader. For some reason this makes it so it doesn't render my alpha opacity! If I then use jQuery to change the opacity then the png breaks and becomes a solid black background, instead of looking like a gradient) with the correct opacity applied.

It is not an option for us to use photoshop to just make the image more transparent, it has to be with css.

DD_belatedPNG of course fixes it but it is causing other very undesirable functionality on our site.

Here is some code:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/gradient.png',sizingMethod='scale'); filter:alpha(opacity=60);

/* the above shows the png correctly but not the opacity, using the following jQuery breaks the PNG*/

$('#sitePageGradient').css('opacity', 0.6);

Open in new window

LVL 1
Shaye LarsenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve KrileCommented:
Have you tried the $.fadeTo() jquery effect.  I believe they baked in opacity goofiness with IE into that effect.

$('#sitePageGradient').fadeTo("fast",0.6);
0
Shaye LarsenAuthor Commented:
k, thanks. Same thing though. I wish I could get you a test to look at but I am developing locally and currently can't get an example on line.

I have checked that the selector is correct when targeting #sitePageGradient for the effect but no go.
0
Steve KrileCommented:
You could attach the png to this question and I could play with it.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Shaye LarsenAuthor Commented:
Here is the image:
gradient.png
0
Steve KrileCommented:
OK, so, when I do this simple example and view it in IE 7, IE 8, FF, Chrome, and Safari, everything looks ok.  That is, the red "bleeds" through as expected.

IE 6 of course botches everything PNG, but you didn't seemed concerned about that (as you should not be! :)).

Can you confirm that my simple example works for you?
gradient.zip
0
Shaye LarsenAuthor Commented:
Okay, yeah, but now add:

filter:alpha(opacity=60)

Open in new window

0
Shaye LarsenAuthor Commented:
Correct, we are not supporting IE6 :)
0
Steve KrileCommented:
I think I've found the issue.  You need a background color for IE to behave.  Try setting the background color of .body to "red" and applying your filter.  Looked good on my end.

So, to be clear, setting the background color of "Transparent" will cause IE to behave badly.

0
Steve KrileCommented:
Here is my final cross-browser working model.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

<style>
	body {background:red;}
	.body {
		height:1000px;
		width: 500px;
		background:red url(gradient.png) repeat-x top left;
		filter: opacity(alpha=60);
	}

</style>

</head>


<body>
	<button id="dofade">Add Opacity</button>
	<button id="dorestore">Remove Opacity</button>
	<div class="body"></div>
	<script>
		$(document).ready(function(){
			$("#dofade").click(function(){
				$(".body").animate({opacity : "0.6"});
			});

			$("#dorestore").click(function(){
				$(".body").animate({opacity :  "1"});
			});
		})
	</script>


</body>


</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Shaye LarsenAuthor Commented:
It works set up like that but we cannot have the color declared with the background on the same layer as the gradient. We have other design peices that have to bleed through and be seen behind the gradient.
0
Steve KrileCommented:
Can you give me a sample of the layers you are working with?  There are a couple ways around this "problem" but I need to know a bit more about your structure.
0
Shaye LarsenAuthor Commented:
There is a pattern later, a background image layer, a gradient layer,  and a color layer. The tool we are building allows to layer these layers from a UI, so a user can put them in any order. The other layers are the same as the gradient layer, even use PNGs, but do not break. It only breaks on a PNG that has a gradual fade/feather effect. We are successfully changing the other layers' opacity and they work fine. The patterns are simple grayscale PNGs that have no feather effect, the transparent parts are where the edge of the pattern ends, and they work fine.
0
Steve KrileCommented:
Well, if you are setting the opacity of the ENTIRE thing with the background, having a background color of white will effectively "lighten" the background.  But, since you can "see through" it, just set the opacity to a lighter amount (30%) and the effect should be close to what you want.
0
Shaye LarsenAuthor Commented:
Yeah, that would work but everything is user defined. The opacity, the specific gradient (there are well over a thousand). And same with the other layers. :(
0
Steve KrileCommented:
So...I think we've defined it.  If one of your users decides to create a background with a transparent .png file, it will not look very nice in IE 7or 8 if they don't also define a background color for the container.  I guess the heartless part of me doesn't care so much.  That is such a specialty case...you could inspect what they are trying to do (add a .png file as a background) and suggest they add a background color.

Otherwise, when you open styling control to your users, you are going to run in to things like this.  As a designer, you know the "trick" to ensuring cross-browser compatibility, but users really don't care.

To blase?
0
Shaye LarsenAuthor Commented:
Thanks for your help. I agree that our situation is rare and this does not apply to most cases. I rated the solution as partially complete because it solved for most users but not for my case. I may need to open another question to address the problem of why can't you have a transparent PNG with opacity without a background-color specified.

Thanks again!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.