views:

90

answers:

1

Hi, 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;
  }
);
+1  A: 

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

Just checked it out. Remove the z-index from the #content class fixes this.
Great. That's fixed it, thanks!
Mr.K