Solved

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

Posted on 2007-03-18
5
256 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Reduce photo size 22 119
Word 2013 custom ribbon to toggle an advanced option on and off 5 81
Windows 10 Photo Editor that works on Domains 4 81
Unusual cropping experience 5 44
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
In a previous article here at Experts Exchange (http://www.experts-exchange.com/articles/18414/Create-a-PDF-file-with-Contact-Sheets-montage-of-thumbnails-for-all-JPG-files-in-a-folder-and-each-of-its-subfolders-using-an-automated-batch-method.html)…
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.
The goal of the tutorial is to teach the user how to make his/her own presets while editing so it is easier to edit there photos. Create a preset you like and copy that setting then save it in to your presets folder.

919 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

16 Experts available now in Live!

Get 1:1 Help Now