Solved

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

Posted on 2007-03-18
5
273 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Image Orientation On Website 6 58
Detect Closed Loops (circles, figure-8s, etc) in PNG Images 6 77
scanning photo's 46 151
Breaking up a large TIFF File 2 49
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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…
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.

726 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