IE PNG fix problem

Question

I have applied ie PNG from here: http://www.twinhelix.com/css/iepngfix/

So I can use transparent PNG background images in my CSS. It works on divs but the problem is when I give a transparent background to unordered list (ul) it doesn't work.

Here is the markup:

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <p>&copy; 2009 Your Name</p>
</div>

And here are relevant parts of the stylesheet:

/* IE PNG fix */
img, div, ul { behavior: url('/css/iepngfix/iepngfix.htc') }

#footer {
    width: 876px;
    margin: 0 auto;
    background: none;
    text-align: center;
    line-height: 1.5em;
    font-size: .8em;
}
#footer ul {
    padding: 40px 0 13px;
    background: url('wrapper-bottom.png') center top no-repeat;
}
#footer p {
    padding-bottom: 15px;
}

I also tried adding background: transparent; to the #footer div but with no success. Other PNG images applied to divs work but under the wrapper-bottom.png there is a grey background (#333) which is a background of most website content areas but I specifically declared background: none; for the #footer so there should be none :(

EDIT: Actually when I don't specify height for the #footer div, the whole footer has grey background...

EDIT: I actuallly managed to solve this myself few minutes after I posted this. I used a very ugly hack though:

#footer {
    height: 0;
}
#footer ul {
    height: 30px;
}

This seems to work in all IE versions.

Answer 1

Try using Unitpng Fix.

Its easy to implement and works with background png too...

Check out this link