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

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lherrouCommented:
EdelmanPlumbing,

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.

Cheers,
LHerrou
knonieCommented:
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"> 
    <ul> 
      <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>
      </ul> 
  </div>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lherrouCommented:
Knonie - your fix works for IE7 which supports PNG, but what about IE6, which many users still use?
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

knonieCommented:
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.

:-)
knonieCommented:
Here's the IE6 trick, that I personally used and tested some while back:

http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.