.png transparency problem in Internet Explorer 7

Posted on 2008-11-09
Medium Priority
Last Modified: 2013-12-08
This is in regards to http://www.diabetesdaily.com/test.php. In Internet Explorer, the two house and people icons in the top left corner are showing up with a white rather than transparent background. The up arrow to the left works fine and they all display correctly in Firefox 3. How can I fix this?
Question by:EdelmanPlumbing
  • 3
  • 2
LVL 38

Expert Comment

ID: 22917084

I see the issue you mention, but what I don't see is any reason (based on your design) to stay with PNG images for those backgrounds. Why not go with a better supported format?

As you may know, IE versions before IE7 do not have direct support for PNG images. There are some work-arounds, but they often do not work well for tiling images, and they add code and complexity to your files. If you want more information, let me know.


Accepted Solution

knonie earned 2000 total points
ID: 22917413
You might know that IE7 supports transparent PNG, this means you don't need to add some more scripts/tricks to achieve transparency.

After studying your code, I found out that there's some syntax error in your HTML that's why IE7 is rendering it different and not showing the correct results.

See your div containing these three icons: <div id="barAccountLeft">

Notice the starting and end tag sequence in this DIV, and you'll notice that you have not closed any <A> tag.

Just close all three <a> with </a> and your problem is gone.
Also, close your <ul> before </div>

Your code will look like the one pasted below:

<div id="barAccountLeft"> 
      <li class="barIcon" style="margin-right: .3em; padding-right: 0;"><a href="#top" target="_self"><img src="http://www.diabetesdaily.com/images/dd6/arrow_up.png" alt="Home" title="Return to the top of the page"/></a></li> 
      <li class="barIcon" style="margin-right: .5em; padding-right: 0;"><a href="http://www.diabetesdaily.com/"><img src="http://www.diabetesdaily.com/images/dd6/house.png" alt="Home" title="Go to the home page"/></a></li> 
      <li class="barIcon" style="margin-right: .3em;"><a href="http://www.diabetesdaily.com/forum/"><img src="http://www.diabetesdaily.com/images/dd6/group.png" alt="Forums" title="View all of our diabetes forums"/></a></li> 
      <li><a href="http://www.diabetesdaily.com/forum/register.php">Join a network of 10,000+ people with diabetes and their advocates!</a></li>

Open in new window

LVL 38

Expert Comment

ID: 22917430
Knonie - your fix works for IE7 which supports PNG, but what about IE6, which many users still use?
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.


Expert Comment

ID: 22917448
Actually the original question explicitly mentions IE7, so that's why the relevant solution is given.

I assume there might be some solution already available for IE6 issue, in Experts Exchange threads.


Expert Comment

ID: 22917460
Here's the IE6 trick, that I personally used and tested some while back:


You need to place some files in your directory, and add a line in your CSS.

Please apply this to your site as well, to maximize the compatibility of your website.


Author Comment

ID: 22917464
Thank you for catching my mistake. This solution worked perfectly. For IE6, I'm using the super-sleight fix: http://24ways.org/2007/supersleight-transparent-png-in-ie6

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses

807 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