Question

I have a hidden div (#contactArea) above another div. When I click the link, the #contactArea opens up. When I click it again, it closes back up. It all works nicely, except in IE7.

The two divs are transparent, so they overlap. I have no idea why this happens, or why doesn’t it happen on other browsers. It just about feels like IE7 is right on this one.

Any way to fix this?

$(document).ready(function(){ 
    $("#contactArea").css('display', 'none');

    $("a.contact").toggle(function() { 
        $("#contactArea").animate({height: "show"}, 1500, "easeOutBounce");
    }, function() {
        $("#contactArea").animate({height: "hide"}, 1500, "easeOutBounce");
    });
});

Answer 1

Add the following CSS rule:

#contactArea {
    background-color: white;
}

(Or some other color). You might also want to add a border.