Background image (transparent 24 bit PNG) fading issue in IE7 / IE8

Question

I have a content element which fades in if the user is above a certain area. The content element has a background image, which is in IE7/IE8 only a big black border instead of a gradient.

Animation code:

$(function(){
 $('#TopPackets').mouseenter(function(){
 jQuery('#TopPacketsContents').animate({
   opacity: 1,
   width: 'toggle'
 }, 307, function() {
 });
 });

 $('#TopPackets').mouseleave(function(){
   jQuery('#TopPacketsContents').hide('slow');
 });
});

Now the content element with the transparent background image:

<div id="TopPacketsContents" style="opacity: 1; display: none;">
    <!-- content -->
</div>

CSS:

#TopPacketsContents {
 background-image: url("../images/transparentBackground.png");
 background-repeat: no-repeat;
 height: 303px;
 width: 411px;
}

I tried the high ratest answer of this thread, but I cannot set background: transparent because I have a background image!

I also tried to create a wrapper element like on this page.

HTML

<div id="TopPacketsContents">
    <div class="BackgroundImageWrapper">    
        <!-- content -->
    </div>
</div>

CSS

#TopPacketsContents {
    height: 303px;
    width: 411px;
}
.BackgroundImageWrapper {
    background-image: url("../images/TopPacketsBackground.png");
    background-repeat: no-repeat;
}

So what are my options? I could use a non transparent image only for IE7/IE8 with conditional comments (would look ugly). Should I use another animation? Should I use a hover effect instead of the animation (only for IE7/IE8)? Are there any other fixes out there?

score 2 · Answer 1 · edited Jul 31 '15 at 13:07

2

See W3Schools on the opacity setting for CSS:

The CSS for this is: opacity=1.

IE8 and earlier: filter:alpha(opacity=100).

edited Jul 31 '15 at 13:07

RevanthKrishnaKumar V.

1,855
1
21
34

answered Oct 28 '11 at 07:56

sq33G

3,320
1
23
38

Do you mean `
`? The opacity here comes from `jQuery('#TopPacketsContents').animate({opacity: 1`. Now I removed the opacity here, because it was not really used. So the fade in works, but the fad out still has the same problem. Why does not jQuery did take care of this? What can I do?
– testing Oct 28 '11 at 08:07
I'm not familiar enough with jQuery to get involved in that end - I'm just pointing out that (assuming that jQuery uses CSS) the opacity attribute is not going to work in IE8 and earlier - you need to use filter: alpha(opacity=###) – sq33G Oct 28 '11 at 08:16

score 0 · Answer 2 · edited May 23 '17 at 10:26

Seems I got this working. As I said I removed the opacity parameter:

<script type="text/javascript">
  $(function(){
    $('#TopPackets').mouseenter(function(){
    jQuery('#TopPacketsContents').animate({
      width: 'toggle'
    }, 307, function() {
    });
    });

    $('#TopPackets').mouseleave(function(){
      jQuery('#TopPacketsContents').hide('slow');
    });
  });
</script>

New CSS with filter:

#TopPacketsContents {
    width:411px;
    height:303px;
    background-image:url(../images/transparentBackground.png);
    background-repeat: no-repeat;
    /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/images/transparentBackground.png", sizingMethod="crop");
}

The following answer didn't work for me. I took my solution from this answer.

Now I found out that this solution doesn't work for my sub pages. The background image disappears, despite the path is correct .. — testing, Oct 28 '11 at 11:19
Because I didn't found a solution I removed `slow` from the arguments of the `hide` function ... — testing, Oct 31 '11 at 08:28

Background image (transparent 24 bit PNG) fading issue in IE7 / IE8

2 Answers2