Question

I understand that there has been countless of question posted here regarding opacity issues on IE. I have gone through almost everyone of them and have tried almost every available method that I have managed to source to but nothing worked.

The strangest thing is that the opacity issue is an isolated case, occurring only on IE8; IE7 had no issues with it whatsoever. Before I proceed to speak more about the problem I’m facing, let me show you a sample of my markup in a single page HTML site that I am developing:

This is the CSS controlling the opacity for the DIVs in question:

#home, #services, #freeport, #about-us, #advantage, #contact{
        opacity:0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        width:400px;
        zoom:1;
    }

And this is the JQUERY I have used to control their opacity settings:

$(document).ready(function(){ //fades in the menu div first followed by the home div

    (function _loop( nodelist ) {
    $( nodelist.shift() ).fadeTo( 2400, 1, function() {
        _loop( nodelist );
    });
    }( ["#menu", "#home"] ));

    $("#about-us-button").click(function(){ //upon clicking the home button, fades in the home div and fades out the rest of the divs
          $("#about-us").fadeTo(900, 1);
          $("#home, #freeport, #advantage, #services, #contact").fadeTo(1000, 0);
    });

});

NOTE: I have only shown how the #about-us div fades in upon clicking the #about-us-button; the rest of the sections work the same way. Also left out the HTML because it’s pretty straight forward – DIV container holding some text, that’s it.

So applying the CSS styles mentioned above, I have managed to get the DIVs to appear at the correct instances in all the browsers (including IE7) except IE8.

What puzzles me most is that filter works in IE7, but -ms-filter which is supposedly IE8 specific failed to work. I’ve read about the HasLayout issue and applied all the methods to no avail. I have also made sure that -ms-filter came before filter but that didn’t work either.

I resorted to also making IE8 emulate IE7 with the meta tag method, but unfortunately, that failed as well.

It should be noted that I have marked this up as HTML5 and after running into this issue, I have marked it down to XHTML 1.0 Transitional and HTML 4.0, but nothing worked – not even the IE8 as IE7 method.

Anyone has any idea what could be done to resolve this? Thanks in advance guys!

Answer 1

I ran into a similar issue not too long ago. I don’t remember the precise details, but I believe what happened was that jQuery would set an opacity value at the element level, constantly changing it as it faded in–and then once the fade was complete would leave the attribute there, but blank, overriding the CSS file opacity. You should be able to doublecheck this with Firebug or the Element Inspector in Chrome.

I believe this is what I used to fix the error, forcing jQuery to clean up that attribute when it was done so the opacity attribute specified in my CSS file could actually take effect. Of course, tweak it to fit properly in your code.

$("#darkbg, #popup-movie-panel").fadeIn(300, function(){
        if(jQuery.browser.msie) {
            this.style.removeAttribute('filter');
            }
        })