Z-INDEX Problem in IE7

Question

If you click the orange ORDER button at the top the #dimmer should cover the whole background and the form should appear at the top. (lightbox-like effect)

The problem is that in IE7 the #dimmer would appear at the top regardless of it's z-index.

In other browsers everything works nicely.

Link: http://fenelon.ru/projects/SpaceFood/2.1-jQuery/

Thank you, fellows!

Answer 1

Try this:

$("#orderBtn").click(function(){
    if(!visible) {

        if ($.browser.msie && $.browser.version.substr(0,1)<8) {
            $(".product").css('z-index','-2');
            $("#order").css('z-index','1');
            $("#dimmer").css('z-index','-1');
        }

        ... // do your other stuff

 } else {

        if ($.browser.msie && $.browser.version.substr(0,1)<8) {
            $(".product,#order,#dimmer").css('z-index','auto');
        }    

        ... // do your other stuff

 }
});

Lazy IE7 needs a z-index to all involved elements. This should work now, let me know.