CODEWITHSUNDEEP
internet-explorer-8internet-explorer-7pngtransparentfade
testing
testing

Reputation: 20279

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

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?

Upvotes: 1

Views: 5386

Answers (2)

sq33G
sq33G

Reputation: 3360

See W3Schools on the opacity setting for CSS:

The CSS for this is: opacity=1.

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

Upvotes: 2

testing
testing

Reputation: 20279

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.

Upvotes: 0

Related Questions