How to solve the PNG images alpha-transparency issue in IE6

What is the method to solve the PNG images issue in IE6. I am having the alpha-transparency issues with PNGS. I've googled some solutions but not sure which one to use. Can anybody help me to solve this.
sonaku2003Asked:
Who is Participating?
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.

lherrouCommented:


Well, it's a complicated issue. Here's the approach I take for a background PNG:
In the top of my page, I have the following:

  <style type="text/css">
    @import url(mysite_screen.css);
  </style>
<!--[if IE]>
<style type="text/css" media="screen">
    @import url(ie_logo.css);
</style>
<![endif]-->

This calls a separate style sheet for the element with a PNG in it for IE.

Here's the relevant sections of the style sheets:
For browsers that support PNG (in the main stylesheet):
#top H1 {
  display: inline;
  height: 140px;
  width: 255px;
  margin-left: 10px;
  margin-top: 12px;
  background: transparent url('images/MyLogo.png') no-repeat top left;
  float: left;
  }

For Internet Explorer (in the ie_logo.css stylesheet):
#top H1 {
  display: inline;
  height: 140px;
  width: 255px;
  margin-left: 10px;
  margin-top: 12px;
  float: left;
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/MyLogo.png');
 }

This calls the IE filter for Internet Explorer users - it also calls it for IE7, which does support PNGs, so you could (probably should) go back and re-write the IF statement to only call that if needed for IE versions less than 7, which would save some systems resources on those using IE7.

Cheers,
LHerrou
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
sonaku2003Author Commented:
Thanks Iherrou,

But in my case , the background image is a gif and a png sits on the top of that.. will your approach work my case
0
lherrouCommented:
Yes, I would still use it as a background image. For example, if you look at www.delraylibrary.org, there's a background image (for DIV ID="top") which makes up the waves across the site), and then the logo (in PNG format) is produced by using the following HTML: <H1><span>Delray Beach Public Library</span></H1>. The CSS for the #top H1 {} uses the logo as a background, and #top H1 span {} is set to display: none; so the actual text does not show in the browser, but the image shows instead.
0
sonaku2003Author Commented:
Iherrou,
Thanks for the fix. Its working now.
I am now trying to use the same one for one of my JSF pages which uses h:graphicimage tag..
Any idea how do i customize your fix for this.

0
lherrouCommented:
I'm sorry, I have never worked with JSF, and don't know how to go about it. I did a quick Google search and searched here at EE, and only found this question we are in right now *grin*

I'd suggest asking a new question, and make sure one of the areas it's cross-posted in is the JSP zone. Let me know when you've done it, and I will make sure an expert or two takes a look.

Good luck.
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
Images and Photos

From novice to tech pro — start learning today.