.png transparency problem in Internet Explorer 7

Posted on 2008-11-09
Last Modified: 2013-12-08
This is in regards to 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
    LVL 38

    Expert Comment


    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.

    LVL 9

    Accepted Solution

    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="" alt="Home" title="Return to the top of the page"/></a></li> 
          <li class="barIcon" style="margin-right: .5em; padding-right: 0;"><a href=""><img src="" alt="Home" title="Go to the home page"/></a></li> 
          <li class="barIcon" style="margin-right: .3em;"><a href=""><img src="" alt="Forums" title="View all of our diabetes forums"/></a></li> 
          <li><a href="">Join a network of 10,000+ people with diabetes and their advocates!</a></li>

    Open in new window

    LVL 38

    Expert Comment

    Knonie - your fix works for IE7 which supports PNG, but what about IE6, which many users still use?
    LVL 9

    Expert Comment

    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.

    LVL 9

    Expert Comment

    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

    Thank you for catching my mistake. This solution worked perfectly. For IE6, I'm using the super-sleight fix:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
    Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
    Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…
    How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

    758 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now