[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

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

Posted on 2007-03-18
5
Medium Priority
?
298 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 1500 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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

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

I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
Microsoft Office Picture Manager was included in Office 2003, 2007, and 2010, but not in Office 2013. Users had hopes that it would be in Office 2016/Office 365, but it is not. Fortunately, the same zero-cost technique that works to install it with …
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Suggested Courses
Course of the Month10 days, 10 hours left to enroll

612 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