LI Background Images (.PNG) not appeared in IE6

Question

Hi

I am using the following CSS but it never shows background images in IE6. But if I remove the filter .. AlphaLoader command, then it shows with grey background.

Here is my CSS Code

.fg-block1 ul, .fg-block3 ul
{
 list-style:none;
 }
.fg-block1 ul li, .fg-block3 ul li
{
 padding-left:28px;
 background:url(images/bullet-2.png) no-repeat left top;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
 border-bottom:1px dotted #fff;
 text-align:left;
 background-position:1px 0;
 line-height:16px;
 padding-bottom:5px;
 margin-bottom:5px;
}
.fg-block3 ul li
{
 border-bottom:none;
}
.fg-block1 ul li a, .fg-block3 ul li a
{
 color:#fff;
 text-decoration:none;
}
.fg-block1 ul li a:hover, .fg-block3 ul li a:hover
{
 color:#fff;
 text-decoration:underline;
}

Answer 1

Try reading this :

http://www.twinhelix.com/css/iepngfix/demo/

Answer 2

AlphaImageLoader hack works only if you set dimensions to the parent container where you load your png as a background.

If you add width and height and display:block to your <li>'s it should be fine. Otherwise - consider different approach.

Answer 3

i recommend jQuery png fix. see links below

jQuery plugin

another source