jQuery fadeIn() fadeOut() black halo in IE7

Question

Just like many other developers, I'm having the same black halo issue while using a CSS PNG background. (Disregard the blurriness. Focus on the black halo).

IE7 Black Halo

==========HTML==========

<div class="s4-notdlg append-bottom-x" id="header"> <a class="show-settings active" href="javascript:;"></a>
  <div class="container">
    <div class="span-13 last">
      <div id="explore"> <a id="header-home-icon" href="" class=""></a> <a id="menu" href="javascript:;" class=""></a>
        <div id="dropdown" style="display: none;">
          <div id="wrap"> </div>
        </div>
        <a style="bottom: 112px;position: absolute;right: 84px;" class="closeThis close" href="javascript:;"></a> </div>
    </div>
  </div>
</div>

==========CSS==========

a#menu.active {
    background-position: -399px -41px;
}
#dropdown {
    background: url(images/bg/menu_dropdown_bg.png) no-repeat;
    height: 340px;
    /*height: 556px;*/
    position: absolute;
    right: -66px;
    top: 48px;
    width: 875px;
    z-index: 99999;
    display:none;
}
#dropdown #wrap {
    /*height: 413px;*/
    height: 211px;    
    margin: 26px 91px 0;
    width: 698px;
}

==========jQuery==========

    //menu
var menu = $('#menu');
var dropdown = $('#dropdown');

menu.toggle(function () {
    menu.addClass('active');
    dropdown.fadeIn();
}, function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return false;
});
dropdown.mouseleave(function () {
    menu.trigger('click');
});

This is what I have implemented and no dice:

for alpha image loader, the path to the image is relative to the html document, not the css. Have you taken care of that? — Dave, Jun 25 '12 at 16:02
hmm.. Well, first try taking out the style from the html and use strictly css for the style. Otherwise, perhaps it has something to do with the zindex? — Dave, Jun 25 '12 at 16:42

score 0 · Answer 1 · edited May 23 '17 at 10:31

There isn't a straightforward answer to this, but here goes - IE6 cannot handle alpha transparency. IE7 and 8 only have partial implementations of handling alpha transparency, and don't deal with fading them.

There are lots of unpleasant ways of fixing this, so the approach I personally take is that these are older browsers and the effect are purely decorative, so make your life easier and just disable this background for these browsers.

However, that doesn't answer your question. What you need to do is apply the "AlphaImageLoader" proprietary filter in IE. You say you've tried it, but it's not in your posted code, can you post what you tried to show us an example?

jQuery fadeIn() fadeOut() black halo in IE7

1 Answers1