PDA

View Full Version : CSS z-Index updating stops working in IE, works fine in FF.



jsnewbie2
Mar 6th, 2010, 08:04 PM
I have a bunch of textareas on top of an image. Some of the textareas overlap so I set the CSS style z-Index to toggle from value 10 and 11 depending if the mouse is over the textarea. In Internet Explorer (IE) for some reason, after I toggle between the textareas after say 3 times, then the textareas stop toggling. It's like the z-Index stopped being set. In Firefox (FF), the toggling works fine forever. Any clue on how to fix in IE?

Javascript:


function showOnTop(tagName, index){
newDiv.style.zIndex = 11;
}

function showOnBottom(newDiv){
newDiv.style.zIndex = 10;
}


HTML:


<form method="post" id="commentform" action="<?php echo $PHP_SELF?>">

<textarea name="comment" style="top:300px;left:400px;overflow:hidden;
visibility:hidden; onmouseout=showOnBottom(id) onmouseover=showOnTop(id)>
Some text</textarea>

<textarea name="comment" style="top:350px;left:450px;overflow:hidden;
visibility:hidden; onmouseout=showOnBottom(id) onmouseover=showOnTop(id)>
Some text</textarea>
//submit button
</form>

mbaker
Mar 6th, 2010, 09:29 PM
I don't know why your code does not work in IE. Equally I don't know how it can work in any other browser.

The following works in IE 8, Firefox 3.5 and Google Chrome 4.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Z-Index TextArea</title>
</head>
<body>
<h1>Z-Index TextArea</h1>
<script type="text/javascript">
function showOnTop(newDiv){
newDiv.style.zIndex = 11;
}

function showOnBottom(newDiv){
newDiv.style.zIndex = 10;
}
</script>
<form method="post" id="commentform" action="<?php echo $PHP_SELF?>">

<textarea name="comment1" style="position:absolute; top:130px;left:40px;overflow:hidden; "
onmouseout="showOnBottom(this)" onmouseover="showOnTop(this)" rows="3" cols="20">
Some text</textarea>

<textarea name="comment2" style="position:absolute; top:145px;left:65px;overflow:hidden; "
onmouseout="showOnBottom(this)" onmouseover="showOnTop(this)" rows="3" cols="20">
Some text</textarea>
<!-- submit button -->
</form>
</body>
</html>