Image background problem in IE6

[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
http://www.html.net/forums/download/file.php?id=102

Please help

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

[|-|x]

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

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

(example modified from linked MS knowledgebase article.)

[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">

[|-|x]

you can place the filter into your css file

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

[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>

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