help with HTML/CSS - z-order on IE7

Previous topic - Next topic
Print
Go Down Pages1
User actions

Kitty Hello

2012-Sep-24
Hi,

I'm going insane. 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
Code (glbasic) Select

<!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
Code (glbasic) Select

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;
}



MrTAToad

#1
2012-Sep-25 Last Edit: 2012-Sep-25 by MrTAToad
If you don't mind I'll repost this in my web development forum (on another site) - see if they can shed any light upon the problem

Kitty Hello

#2
2012-Sep-25
many thanks.

MrTAToad

#3
2012-Sep-26
So far the reply (from www.thinkbroadband - it's an broadband technology site) :

Quotelook into adding IE7 specific CSS, perhaps along the lines of 'position-relative / position-absolute' for the z-index stuff.

erico

#4
2012-Sep-26
I wish I could help this out, but I know no one who has knowledge on it. :(

mentalthink

#5
2012-Sep-26
The same, I think this it´s a job for the Masters (not of Universe)

Poetronic

#6
2012-Sep-26 Last Edit: 2012-Sep-27 by Poetronic
Ok, when I opened your page on my own webspace with firefox, the behavior of the hover-effect was odd... it vanished after mouseleave and was visible from the beginning. I think I solved the problem using jquery, at least on my IE7 emulation the transparency vanished and it also looks fine in firefox. The idea was to dynamically alter the z-index value not only for the content-element, but also for the surrounding infoframe element with jQuery.

Cf. http://www.katjadeutschmann.de/wissen/html-css/ie7-z-index-bug-bei-absoluten-elementen-innerhalb-von-relativ-positionierten-elementen.html

DHTML:
Code (glbasic) Select

<!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! -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="servicecenter.css" title="fideslic" rel="stylesheet" type="text/css">
<script  type='text/javascript'>
$(document).ready(function(){
$(".infoframe").mouseover(function() {
$(".content", this).css("display","block");
$(".content", this).css("z-index","2");
$(this).css("z-index","2");
});
});

$(document).ready(function(){
$(".infoframe").mouseleave(function() {
$(".content", this).css("display","none");
$(".content", this).css("z-index","1");
$(this).css("z-index","1");
});
});
</script>
<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:
Code (glbasic) Select

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{
display: none;
/*visibility: hidden;*/
position:absolute;
left:0px; top: 0px;
border: 2px solid #4488cc;
background: #fff;
}


/* 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: #fff 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;
}


Hope it helps!  :)

Best,
P.
ILI-Blocks, my first game ever - please check it out! http://www.glbasic.com/forum/index.php?topic=8654.0

Poetronic

#7
2012-Sep-26
BTW - If you want the whole table row to activate the hover-effect, use the following code:

Code (glbasic) Select

<script  type='text/javascript'>
$(document).ready(function(){
$(".tableitem").mouseover(function() {
$(".content", this).css("display","block");
$(".content", this).css("z-index","2");
$(".infoframe", this).css("z-index","2");
});
});

$(document).ready(function(){
$(".tableitem").mouseleave(function() {
$(".content", this).css("display","none");
$(".content", this).css("z-index","1");
$(".infoframe", this).css("z-index","1");
});
});
</script>
ILI-Blocks, my first game ever - please check it out! http://www.glbasic.com/forum/index.php?topic=8654.0
Print
Go Up Pages1
User actions
SMF 2.1.4 © 2023, Simple Machines
ProCurve Theme Made By : TwitchisMental