Technical Discussion
  >> Web Design / HTML / Web hosting Forum


Register (or login) on our website and you will not see this ad.


  Print Thread
Standard User MrTAToad2
(eat-sleep-adslguide) Tue 25-Sep-12 14:57:02
Print Post

Z ordering in IE 7


[link to this post]
 
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
1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061
6263
6465
6667
6869
7071
7273
7475
7677
7879
8081
8283
8485
8687
8889
9091
9293
9495
9697
9899
100101
102103
104105
106107
108109
110111
112113
114115
116117
118119
<!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
1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061
6263
6465
6667
6869
7071
7273
7475
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;}


Follow me on Twitter. Be*
My Blog
12 Things...
Standard User camieabz
(sensei) Tue 25-Sep-12 15:04:46
Print Post

Re: Z ordering in IE 7 *DELETED*


[re: MrTAToad2] [link to this post]
 
I could be wrong, but look into adding IE7 specific CSS, perhaps along the lines of 'position-relative / position-absolute' for the z-index stuff.

Edited by camieabz (Tue 25-Sep-12 15:07:08)

  Print Thread

Jump to