jQuery .fadeIn turns content invisible in IE

Question

I'm having some difficulty getting IE to behave. I have created a web page containing various hidden divs.

These act as sub pages, when a nav item is clicked they fade in/out in a very basic lightbox manner.

It works in Firefox & Safari but in IE (8) it fades in to about 60% then vanishes completely, also knocking out the background of the div behind? It's still there because I can right-click the images, just invisible?

The code show below causes #home to fade to %50 then #subAbout fades in over the top before it dissapears.

Any advice would be appreciated..

$("#nAbout").click(function () {
    if(currentActive != "#subAbout") {
    $(currentActive).fadeOut('fast');
    $('#slideshow').cycle('pause');
    $("#home").animate({opacity: .5});
    $("#subAbout").fadeIn('slow');
    currentActive = "#subAbout";
    }
    else if(currentActive == "#subAbout") {
    $('#slideshow').cycle('resume');
    $("#home").animate({opacity: 1});
    $("#subAbout").fadeOut('slow');
    currentActive="#subHome"
    }
    return false;
  }
);

Answer 1

This sounds like a CSS conflict. Can you try removing your inline styles/ css and see if you can reproduce?