.png transparency problem in Internet Explorer 7

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?
Who is Participating?
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


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.

Knonie - your fix works for IE7 which supports PNG, but what about IE6, which many users still use?
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

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.

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.

EdelmanPlumbingAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.