Member Avatar for tqmd1

Dear Sir,

I have following codes

<div id="button">
    <ul>

      <li><a href="index.html"><img src="images/home.png" align="middle">&nbsp;&nbsp;Home</a></li>

      <li><a href="products.html"><img src="images/product.png" align="middle">&nbsp;&nbsp;Products</a></li>

      <li><a href="directors"><img src="images/director.png" align="middle">&nbsp;&nbsp;Directors</a></li>

      <li><a href="contacts.html"><img src="images/phone.png" align="middle">&nbsp;&nbsp;Contact</a></li>

      <li><a href="feedback.html"><img src="mail.png" height="24" width="24" align="middle">&nbsp;&nbsp; Feedback</a></li>

      <li><a href="links.html"><img src="images/home.png" align="middle">&nbsp;&nbsp;Links</a></li>

      <li><a href="#"><img src="help.png" align="middle">&nbsp;&nbsp;about Us</a></li>
    </ul>
  </div>

In IE6, Image in menu displays with background.
I want to display it as transparent.

Menu snapshot is here

Please help

Edited by tqmd1 because: n/a
  • 3 Contributors
  • 6 Replies
  • 124 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by |-|x

Dani AI

Generated

Short expert summary for : is right to check the source files, and is correct that IE6 needs special handling. Below are practical, low-risk options to get your menu icons rendering cleanly in IE6, plus a few cautions about common pitfalls.

Best long‑term fix (recommended)
Replace the inline <img> icons with CSS background icons (one sprite or small per‑icon images) on the <a> elements, then use padding to make room for the icon. That lets modern browsers use PNG‑24 with alpha while you supply an IE6 fallback (PNG8/GIF sprite or alternate CSS) just for that browser. Use an IE‑only stylesheet loaded with a conditional comment to swap the fallback image:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->

Quick patch (if you must keep <img>s)
Use a small IE6 PNG fix script that automates the workarounds across many elements (so you don’t have to write the proprietary filter string for each image). One popular, maintained option is DD_belatedPNG (see the project on GitHub). Load it only for IE6 via a conditional comment and call its fix routine for your menu selectors.

Cautions and testing tips

  • The Microsoft filter hack can break layout, ignore background-position/repeat, and needs explicit dimensions — test hover/focus states carefully.
  • Verify icons actually contain alpha (check Channels in an editor or view in a modern browser). Avoid re-saving from MS Paint.
  • Remove deprecated attributes like align and use CSS for vertical alignment and spacing.
  • Test in a real IE6 environment (VM or BrowserStack), not just Compatibility Mode.

If supporting IE6 is optional, consider progressive enhancement: keep icon images for modern browsers and allow a simpler text menu for legacy IE6.

Recommended Answers

All 6 Replies

Member Avatar for ndeniche

Make sure your png files have a transparent background. If not so, edit them with an image editor (not paint) and remove the background and save them as png (make sure that all "include background color" options are NOT selected.

Member Avatar for |-|x

Please note that IE6 does not provide native support for PNG transparency. You must use a provided by MicroSoft.

<DIV STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');" >

(example modified from linked MS knowledgebase article.)

Edited by |-|x because: example
Member Avatar for tqmd1

Hello Again

I have many <img> in my <div id="button">

Your following example contains only one img (src='image.png')

<DIV STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');" ><DIV STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');" >

My question is how to use above codes for every img in <div id="button">

Member Avatar for |-|x

you can place the filter into your css file

#button {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}
Member Avatar for tqmd1

Dear Hearth,

What other changes should I made in my following HTML part for each png

<div id="button"> 
   
    <ul>

      <li><a href="index.html"><img src="images/home.png" align="middle">&nbsp;&nbsp;Home</a></li>

      <li><a href="products.html"><img src="images/product.png" align="middle">&nbsp;&nbsp;Products</a></li>

      <li><a href="directors"><img src="images/director.png" align="middle">&nbsp;&nbsp;Directors</a></li>

      <li><a href="contacts.html"><img src="images/phone.png" align="middle">&nbsp;&nbsp;Contact</a></li>

      <li><a href="feedback.html"><img src="mail.png" height="24" width="24" align="middle">&nbsp;&nbsp; Feedback</a></li>

      <li><a href="links.html"><img src="images/home.png" align="middle">&nbsp;&nbsp;Links</a></li>

      <li><a href="#"><img src="help.png" align="middle">&nbsp;&nbsp;about Us</a></li>
    </ul>
  </div>
Member Avatar for |-|x

Sorry, Tariq

I think I misread your previous post. You will need to specify the filter on each menu link individually, as they all have different images.

Something like:

<div id="button">
    <ul>
      <li><a href="index.html" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/home.png', sizingMethod='scale'); padding-left:20px;">Home</a></li>

...

You will probably need to play a little with the position to get it right. Of course, the style can all be moved into a css file if you prefer.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.