!!n00b!! Internet Explorer Image problem with JQ

!!n00b!! Internet Explorer Image problem with JQ

Hi all i'm very new at all this just started learning JQ from scratch the other day.

I have built a nav for my site using JQ, and i am applying an animated hover effect.

link: http://www.danickweb.co.uk/dan/website-test/

what i have done works perfectly in FF, but in IE i get a strange black area that fills in the boarders transparent areas.

I have the IE6 PNG fix applied but surely wouldn't apply to IE7?

I saw on a forum about a cleartype fix in the JQ but i'm not sure how to apply it.

My JQ code is:

$(function() {
$('.li').hover(function() {
$(this).children('.over').stop().animate({"opacity" : '1'}, 400);
}, function() {
$(this).children('.over').stop().animate({"opacity" : '0'}, 200);
});
});

would really love it of someone could help me fix this.

Thanks