.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?
 
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

0
 
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
0
 
lherrouCommented:
Knonie - your fix works for IE7 which supports PNG, but what about IE6, which many users still use?
0
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.

 
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.

:-)
0
 
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.

:-)
0
 
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
0
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.