Z ordering in IE 7 :: Web Design / HTML / Web hosting Forum

I'm posting this for someone else (I'm not "into" web development myself) :

I have to make the popups work in IE-7 mode. Can someone try to help me?
The text of the table is somehow hovering above my popup. In IE8 it seems fixed, but with <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> this bug can be reproduced.

HTML :

Text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><head>
    <title>Untitled Page</title> 
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- IE8 or later - z-index problems with IE6! --> 
        <link href="servicecenter.css" title="fideslic" rel="stylesheet" type="text/css"> 
        <script type="text/javascript"> 
                var gMenuText = Array();                var gMenuId = Array();
                var gTotHtml = ""; 
                function clearmenu() {                        gTotHtml = "";
                        gMenuText = [];                        gMenuId = [];
                } 
                function addmenu(id, text) {                        gMenuText.push(text);
                        gMenuId.push(id);                }
                 function popup(id, bshow) {
                        document.getElementById(id).style.visibility = bshow ? 'visible' : 'hidden';                }
  
                function addprogram(text, prog3) {                        var html = "";
                         html += ('<tr class="tableitem" onclick="popup(\'popup'+prog3+'\',1);" ><td>'
                                                                +'<div class="infoframe">'); 
                        // start popup window                        html += ('<div class="content" id="popup'+prog3+'" onmouseleave="popup(\'popup'+prog3+'\',0);">'
                                                        +'<h3>'+text+'</h3>'); 
                        for (var i = 0; i < gMenuId.length; ++i) {                                var tmp = '<button type="submit" name="click" value="' + prog3 + '/' + gMenuId[i] + '">'+gMenuText[i]+'</button><br/>';
                                html += tmp;                        }
                        html += "</div>"; // popup window content 
                        html += (  '    <div class="arrow">&nbsp;</div>'                                                        +'<div id="name'   +prog3+'">'+text+'</div>'
                                                        +'</div></td>' // </div of infoframe>                                                        +'<td><div id="versloc'+prog3+'"></div></td>'
                                                        +'<td><div id="versdvd'+prog3+'"></div></td>'                                                        +'<td><div id="versliv'+prog3+'"></div></td>'
                                                        +'<td><div id="license'+prog3+'"></div></td>'                                                        +'</tr>');
                         gTotHtml += html;
                } 
                function writeprograms() {                        var html = "";
                         html += '<table class="maintable"><tr><th>Program</th><th>Local Version</th><th>DVD-Version</th><th>Live-Update</th><th>Lizenz</th></tr><tbody>';
                        html += gTotHtml;                        html += '</tbody></table>';
                        // setstatus(name3, displayname, '<img src="loading.gif">', '<img src="loading.gif">', '<img src="loading.gif">');                        document.getElementById('placeholder').innerHTML = html;
                } 
                 function setstatus(name3, namelong, vlocal, vdvd, vlive, license)
                {                        if (namelong.length > 0)
                                document.getElementById("name" + name3).innerHTML = namelong;                        if (vlocal.length > 0)
                                document.getElementById("versloc" + name3).innerHTML = vlocal;                        if (vdvd.length > 0)
                                document.getElementById("versdvd" + name3).innerHTML = vdvd;                        if (vlive.length > 0)
                                document.getElementById("versliv" + name3).innerHTML = vlive;                        if (license.length > 0)
                                document.getElementById("license" + name3).innerHTML = license;                }
  
                         var g_download_tot_todo = 0;
                        var g_download_tot_done = 0;                function downloading(delta_todo, delta_done) {
                        g_download_tot_todo += parseInt(delta_todo);                        g_download_tot_done += parseInt(delta_done);
                        // NEED display                }
         </script>
  
</head> 
  
<body> 
<div id="placeholder">&nbsp;</div> 
<script type="text/javascript">        clearmenu();
        addmenu("update", "Update now");        addmenu("buy", "Kaufen");
        addprogram("Programm 1", "PRA");        addprogram("Program 2", "PRB");
        writeprograms(); 
         setstatus("PRA", "WALLS-Verbau", "2012.222", "2012.230", "2012.444", '<img src="green.png"> 2013.100 / 08.feb.2012');
</script> 
</body></html>

CSS :

Text

BODY
{}
 a, a:visited {
        color: Blue;        text-decoration: underline;
} 
.maintable{
        border-collapse: collapse;        border: 2px solid black;
        padding: 4px 4px 4px 4px;}
 .tableitem{}
 tr.tableitem td{
        background-image: url('backgnd_line.png');        background-repeat: repeat-x;
        background-position: 0px 2px; 
        border-left: 1px solid #88ccff;        padding: 2px 16px 2px 4px;
} 
 /* infoframe div - hover it to show popup information */
.infoframe{        position: relative; left: 0px; top: 0px; /* so the menu can be position:absolute - relative to parent */
} 
/* content - popup overlay of infoframe */.infoframe .content{
        /*visibility: hidden;*/        position:absolute; left:0px; top: 0px;
        border: 2px solid #4488cc;        
        background-color: #ffffff; 
        z-index:999;}
  
/* when hovering parent, highlight it */.infoframe:hover
{        background-image: url('backgnd_line_hover.png');
        background-repeat: repeat-x;        background-position: 0px 2px;
} 
 /* header for popup menu */
.content h3{
        margin-top: 4px;        margin-bottom: 4px;
        background-image: url('backgnd_line_hover.png');        background-repeat: repeat-x;
        background-position: 0px 2px;}
.content button{        width: 15em;
} 
 .arrow{
        width: 18px; height: 20px;        padding: 0 0 0 0; margin: 0 0 0 0; border: none;
        background-image: url('arrow.png'); 
        float: left;}

Z ordering in IE 7

Re: Z ordering in IE 7 *DELETED*

Re: Z ordering in IE 7 DELETED