IE7 turns the edges of my rollover images black

Question

I am using jquery script for my image rollovers and I am encountering a problem in IE7 only where all of my images load in properly but once you rollover the image and roll out the edge of the top image turns black. Does anyone have any idea as to what might be causing this. The site can be found at free-to-be-me.com/ask-ava.php.

Here is the code i am using:

    $(function() {
        $(".bw").hover(function() {
            $(this).animate({ opacity: 0.0 }, 200);
        });
    });

    $(function() {
        $(".bw").mouseout(function() {
            $(this).animate({ opacity: 1.0 }, 200);
        });


<div class='liner-nav'>
    <div class='container'>
         <a class='html' href='ava-lb/options.html' style='border:none;' rel='group'><img src='images/ava/School_pink.png' class='bw' style='border:none;' /></a>
         <img src='images/ava/School_blue.png' class='colour' alt='' />
    </div>
</div>
});

Thanks in advance for your help.

EDIT

I have been trawling the internet for hours now trying various different hacks to try to stop IE7 from ballsing up PNGs. I have come to the conclusion that although IE7 can handle PNGs with the minimum of fuss, it doesn't handle the change of opacity well. So i have opted for a straight image swap as it is achieves the same thing. Thanks for your help.

IE browsers and PNG images don’t play nice. – Mathias Bynens Feb 08 '10 at 14:00 — Mathias Bynens, Feb 08 '10 at 14:00

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

All versions of IE still have issues with PNGs that have a opacity setting applied. See this SO question.

edited May 23 '17 at 12:26

Community

1
1

answered Feb 08 '10 at 13:45

Pekka

442,112
142
972
1,088

score 0 · Answer 2 · answered Feb 08 '10 at 14:13

I think your main problem is that the two images are slightly different sizes - the pink image (what appears when you roll over) is 249x89 pixels, whereas the blue image (what's there underneath) is 257x97 pixels.

Combine that with IE's well-known issues with opacity in PNGs and you get the effect you see.

I'd suggest you add an 8 pixel wide white border to the left and top sides of your pink image to make it the same size as the blue image. That should achieve the "button pushed down and pink" look you seem to be after.

One way to do this is with the imageMagick convert tool:

convert -size 257x97 xc:white -page +8+8 School_pink.png -flatten School_pink_wborder.png

However, you'll want to run the result that gives you through pngquant or a similar tool because convert doesn't output indexed color images, only full color.

thanks for the suggestion. I've just given it a try and i still get the same thing unfortunately. — Drew, Feb 08 '10 at 14:25

IE7 turns the edges of my rollover images black

2 Answers2