Question

Okay, so if you look at this site in Internet Explorer 7 (I use the browser mode tool in IE 9; just press F12). When hovering over the table cells in the first row the help box <div class="help"> becomes hidden behind the second (okay: third) row’s background property.

Why is this? It works in Chrome, Firefox, Opera and IE 8–9 (although the jQuery script is messed up in IE 8 for some reason). I have tried lower z-index on <table>, <tr> and <td>, but with no success yet.

Edit #1. Oh yeah, all borders in the table are not showing in IE 7. That is strange, no?

Edit #2. CodeJack’s jQuery solution seems to be working.

if ($.browser.msie && $.browser.version == "7.0") {
    var z = 1000;

    $("table, tr, th, td, div").each(function() {
        $(this).css("z-index", z);
        z -= 10;
    });
}

Answer 1

Z-Index doesnt work properly in IE7. But there are ways.

A solution can be to place (absolutely) an iframe with opactiy set to 0 (CSS:filter:alpha(opacity=0)) directly behind the div. The iframe must have the same width and height and be place at the same location (but behind) the div.

for Jquery there is solution here

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Edit: Regarding borders use margin-collapse rather border collapse