Linux Support, Hosting & Security Hertfordshire

Wednesday, 6 October 2010

Black borders on PNGs in IE when fading in jQuery

Problem

While IE 8 supports transparent png's, it doesnt support the changing of opacity on a transparent png. This means when you try to use the fadeIn/fadeOut (and other effects) in jQuery on a transparent png, IE8 and below will give the image a horrid black border.

Example

  <script type="text/javascript">
       $("#fadeMe").fadeIn();
  </script>


<img id="fadeMe" src="some-transparent.png" />

Solution

I've seen many solutions for this issue, including hacking ie6 png scripts to resolve this issue for ie8. None of which really helped or seemed to work well.

The best solution ive found is to use two DIV's with the image as backgrounds and using the CSS filter property which only IE seems to recognise.

The following CSS solution works without fail for me. However it does break W3C CSS compatibility. But hey, you can have it all!

Hope this digs someone else out a IE HELL HOLE

Above Example would become;


  <style type="text/css">
    #fadeMe {
      position:absolute;
      z-index: 2;
      width: 145px;
      height: 146px;
    }
 
    #fadeMeImg {
      width:100%;
      height:100%;
      background:transparent url('/images/some-transparent.png') no-repeat;

      /* IE hack */
      background:none\9; /* Targets IE only */
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/some-transparent.png", sizingMethod="crop");
    }
  </style>

  <script type="text/javascript">
       $("#fadeMe").fadeIn();
  </script>

<div id="fadeMe">
  <div id="fadeMeImg"></div>
</div>

Did this post help you? Thank us with bitcoin;

4 comments:

  1. Hello. Thank you. Could you tell me how I might be able to add more images to this in order to create a slide show?

    Thank you for you help.

    John

    ReplyDelete
  2. Id suggest you look at one of the jquery slide show plugins. I quite like cycle. http://jquery.malsup.com/cycle/

    ReplyDelete
  3. this is the only WORKING solution I've found for this issue, many Thanks!

    ReplyDelete
  4. WOW!!! Thank you very much, IT WORKS!!!

    ReplyDelete