IE png with jquery and css question

Question

function fadehomepage() {

        //Set opacity  to 0
         $('#showcase_home > div > a').css({'opacity':'0'});



        $('#showcase_home > div').hover(    

                function () {
                      var selected_div = $(this).attr("class") + "_hover";
                      $(this).find('.' + selected_div).stop().fadeTo(500, 1)                 
                 },

                function () {
                      var selected_div = $(this).attr("class") + "_hover";
                      $(this).find('.' + selected_div).stop().fadeTo(300, 0)                 
                }

        );
}

the CSS example

   div#showcase_home div.shop{
       background:url(img/shop.png) no-repeat top;
       margin-right:0;
   }
   .shop_hover{
       background: url(img/shop_hover.png) no-repeat top;
       width: 290px;
       height:230px;
       display:block;
       padding:0;
       margin:0;
   }

both pngs have transparency. I don't care about IE6.

1) in IE7/IE8 on mouseover when shop_hover.png appears it doesn't have transparency, instead it shows black :S

2) why in IE if I set opacity below 1 for transparent pngs it loses transparency?

3) how long before I can code without losing friggin DAYS to fix IE problems only? P

Answer 1

Png + opacity + IE = problems. They are a bad recipe. Since I deal with this daily here is what I do.

There are a couple options to fix the png problems.

1. Use and tinker with IE's alpha image loader. http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx

2. Use a library called dd_roundies which generates a vml version of your image which won't have these png problems.

When the page loads, calls something like this:

DD_roundies.addRule('div#showcase_home div.shop');

This should fix them and then on hover the images should remain fixed.