0

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.

orftz
  • 1,138
  • 13
  • 22
Jason
  • 1
  • 1
  • 1

3 Answers3

1

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>
Community
  • 1
  • 1
blu42media
  • 236
  • 2
  • 4
  • I would like to post the code, but seems to be too many characters. I've made these updates. Before tweaking the css I wanted to see how the transparent overlay png files reacted. Seems like they are still showing the black border? – Jason May 31 '11 at 11:15
  • Hey Jason... you are very close! With your css, include .overlay{opacity:0} and take out the jQuery adjustment to 'filter' - that may be triggering the transparency issue. – blu42media May 31 '11 at 14:07
  • Hey blu! Thanks for getting back to me. I added .overlay{opacity:0} to my css and then removed the filter from the jquery. Not sure that was the trick. http://www.bluegrassbackingtracks.com/stage/ – Jason Jun 01 '11 at 02:03
0

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 .

Community
  • 1
  • 1
Ivan
  • 10,052
  • 12
  • 47
  • 78
0

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.

ThiagoAlves
  • 1,313
  • 16
  • 25
  • You have posted this answer verbatim on several other questions. Please consider at least tailoring it to fit the exact context of the question, showing in greater detail where the question author is going wrong and perhaps making additional recommendations. – Tim Post Jul 11 '11 at 06:06
  • That is because I spent hours trying to find info about the topic before posting a question. So when I found the solution, I posted it in all the questions you mentioned, because I tried all of them and none worked. – ThiagoAlves Jul 26 '11 at 14:13