Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE png with jquery

5:13 pm on Aug 25, 2010 (gmt 0)

5+ Year Member

Hello this is the CSS code

background: url(img/shop_hover.png) no-repeat top;
width: 290px;
div#showcase_home div.shop{
background:url(img/shop.png) no-repeat top;

This the HTML code

<div class="shop">
<a class="shop_hover" href="?page=shop"></a>

and this is the JS (jquery)

//Set opacity to 0
$('#showcase_home > div > a').css({'opacity':'0'});

$('#showcase_home > div').hover(

function () {
var selected_div = $(this).attr("class") + "_hover";
$(this).find('.' + selected_div).stop().fadeTo(500, 1)

function () {
var selected_div = $(this).attr("class") + "_hover";
$(this).find('.' + selected_div).stop().fadeTo(300, 0)


it basically shows another png on hover fading. Forgetting the IE6 existence , IE7-IE8 both shows a black color when its supposed to be transparent on the hover image only.
I tried to apply DD.roundies fix but the A tag loses the href propriety, so link won't work anymore!
Any other fix?
7:56 pm on Aug 25, 2010 (gmt 0)

IE does not handle PNG transparency without the PNG fix [pcmag.com]. One of these may also have a solution for you:


Not sure if JQuery is taking this IE problem into account.
8:50 pm on Aug 25, 2010 (gmt 0)

5+ Year Member

Except the first example you linked all IE6 related problems.
IE7-8 that I care about do support transparency but for some odd reason it doesn't work on hover! :(

I so hate this browser
6:11 am on Aug 26, 2010 (gmt 0)

Pictures are not displayed on Web sites in Internet Explorer [support.microsoft.com]

View products that this article applies to [support.microsoft.com]

Last link shows you that it affects IE 8 for all images at times.

* Windows Internet Explorer 8
* Windows Internet Explorer 7 in Windows Vista
* Windows Internet Explorer 7 for Windows Server 2003 IA64
* Windows Internet Explorer 7 for Windows XP
* Windows Internet Explorer 7 for Windows Server 2003
12:50 pm on Aug 26, 2010 (gmt 0)

5+ Year Member

I dont get it, what does it have to do with my problem?
1:41 pm on Aug 26, 2010 (gmt 0)

5+ Year Member

When you said dd_roundies, you mean dd_belatedPNG?

I've had all sorts of issues with png scripts in the past and have had to use different scripts for different sites because of bugs.

My suggestions would be to try an assortment and see if you can find one that works.

Could the href attribute being removed have something to do with the <a> being empty? try putting something in there to test. Also I wouldn't recommend using a relative link that's just a query string.
4:21 pm on Aug 27, 2010 (gmt 0)

5+ Year Member

actually I gave up on this for now, it will sure happen again in the near future. right now i just cant lose my mind to fix IE problems