CODEWITHSUNDEEP
jqueryinternet-explorerinternet-explorer-8png
Jason
Jason

Reputation: 1

jQuery fade in/out bug with transparent images in IE8

I've spent the last 4 hours trying to implement all the IE8 fixes for transparent images. Unfortunately none of them are working.

Here's the testing url: http://www.bluegrassbackingtracks.com/stage/

You can see when you scroll over the icons in IE8, the images have a black border added to them.

I would greatly appreciate anyone who can help us out.

Upvotes: 0

Views: 5857

Answers (3)

ThiagoAlves
ThiagoAlves

Reputation: 898

Define a solid background color to your image:

    .container img {
         background-color: white;
    }

Define the background-image css property of your image to its src attribute:

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Advantage: you don't need to change your markup

Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.

Upvotes: 0

blu42media
blu42media

Reputation: 246

This issue seems more about jQuery and the fadeIn/Out transparency issue with IE.

Check this out for reference: jquery IE Fadein and Fadeout Opacity

For helping IE, if you can place the image inside of a div and apply the fade to the div instead you should get the effect you are after. There can be transparency issues when the fade is applied to a background image.

Give something like this a try. You will need to adjust your jQuery a bit as well.

<ul class="img_list">
    <li class="image_two">
        <a href="category.php?id=2">
            <div class="overlay"><img src="images/buttontwo-overlay.png" alt="" width="136" height="176" /></div>
            <img src="images/buttontwo.png" alt="" width="136" height="176" />
        </a>
    </li>
</ul>

Upvotes: 1

Ivan
Ivan

Reputation: 10372

There's a lot of code to go through on that site, if you could post the relevant code here, it would be a lot easier to see what the problem is.

Until then, this may solve your problem:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Put this in $(function () {}); and it should add the filter to each image so that the opacity doesn't mess up and produce black.

If this doesn't work, take a look at: jquery cycle IE7 transparent png problem .

Upvotes: 0

Related Questions