Solved

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

Posted on 2007-03-18
5
252 Views
Last Modified: 2010-04-07
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.
0
Comment
Question by:sonaku2003
  • 3
  • 2
5 Comments
 
LVL 38

Accepted Solution

by:
lherrou earned 500 total points
ID: 18745744


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
 

Author Comment

by:sonaku2003
ID: 18774376
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
 
LVL 38

Expert Comment

by:lherrou
ID: 18774461
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
 

Author Comment

by:sonaku2003
ID: 18801250
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
 
LVL 38

Expert Comment

by:lherrou
ID: 18801388
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses the PaperPort 14 Scanner Connection Tool, which Nuance provides at no charge in order to fix scanning problems in Windows 8. Furthermore, users of PaperPort 14 in Windows 7 and Windows 10 have reported that the tool works in t…
This article provides the solution to a question (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28674207.html) posed here at Experts Exchange. The asker of the question has many JPG images in many folders, and all of t…
The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
The goal of the tutorial is to teach the user what gradient filters are and how to use them. When you have a photo and some part of the photo is either over exposed or under exposed, you use a gradient filter to help mask the need to touch up th…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now