...

View Full Version : Problem with z-index



elmu
07-19-2005, 04:03 PM
Hello,

I have a form with some text field and with some comboboxes. I added a tooltip info to the form with the following css style:

Code:

#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}

The div using this css should be on the top but in case of comboboxes it is under the box. In case of textfield and normal texts it works fine just the combobox hides its area.

Any idea?

Thanks!

elmu
07-19-2005, 06:15 PM
Here is the complete demo code I use. It works fine withe Firefox and Opera but not with IE.


<html>
<head>
<title>Div demo</title>

<style type="text/css">
.cssTooltipText {color: #034340;background-color: #bec8d2;}
.cssHeader {font-weight: bold; color: #FF9900; background-color: #003366;}
.cssFormBorder {order: 1px solid #006699;padding: 0px;margin: 0px;align: center;}
#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}
</style>

<script language="JavaScript">
var ie = document.all ? 1 : 0
var ns = (document.getElementById && !document.all) ? 1 : 0

if(ns){doc = "document.getElementById(\"ToolTip\")"; sty = ""}
if(ie){doc = "document.all."; sty = ".style"}

var initialize = 0
var Ex, Ey, topColor, subColor, ContentInfo

if(ie){
Ex = "event.x"
Ey = "event.y"
}

function MoveToolTip(layerName, FromTop, FromLeft, e){
if(ie){
eval(doc + layerName + sty + ".top = " + (eval(FromTop) + document.body.scrollTop))
eval(doc + layerName + sty + ".left = " + (eval(FromLeft) + 15))
}
if(ns){
document.getElementById("ToolTip").style.top = FromTop
document.getElementById("ToolTip").style.left = FromLeft + 15
}
}

function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){document.getElementById("ToolTip").innerHTML = ContentInfo}
}

function Activate(){initialize=1}
function deActivate(){initialize=0}

function overhere(e){
if (!e) var e = window.event;
if(initialize){
if (ns) {
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=overhere
Ex = window.pageXOffset+e.clientX
Ey = window.pageYOffset+e.clientY
}
MoveToolTip("ToolTip", Ey, Ex, e)
document.getElementById("ToolTip").style.visibility = 'visible'
}
else{
MoveToolTip("ToolTip", 0, 0)
document.getElementById("ToolTip").style.visibility = 'hidden'
}
}

function EnterContent(layerName, TTitle, TContent){

ContentInfo = '<table width="150" cellpadding="4" cellspacing="0" class="cssFormBorder">'+
'<tr class="cssHeader"><td>'+TTitle+'</td></tr>'+
'<tr class="cssTooltipText"><td>'+TContent+'</td></tr></table>';

ReplaceContent(layerName)
}
</script>

</head>
<body class="cssBody" onmousemove="overhere()" >
<div id="ToolTip"></div>

<form name="demo" method="post" action="demoproc.php">
<img src="theme/images/info.gif" onMouseover="EnterContent('ToolTip','Testpage','The combobox is over the div. Why?'); Activate();" onMouseout="deActivate()">
<input name="name" type="text"><br>
<select name="selector">
<option>test1</option>
<option>test2</option>
</select><br>
The combobox is over the div. Why?
</form>
</body>
</html>

hourang
07-19-2005, 06:40 PM
you could try integrating this into yours:


<script>
<!--
function showMenu(value){
if(document.all)
if(document.all.selectMenuOuter)
if(document.all.selectMenuOuter.filters){
if(value){
document.all.selectMenuOuter.filters["revealTrans"].apply();
document.all.selectMenuInner.style.display = "none";
document.all.dropDownMenu.style.display = "block";
}else{
document.all.dropDownMenu.style.display = "none";
document.all.selectMenuInner.style.display = "block";
}
}
}
//-->
</script>

<div id="selectMenuOuter" style="filter:revealTrans; height=50; width=100;">
<select id="selectMenuInner">
<option>select menu</option>
<option>select menu</option>
<option>select menu</option>
</select>
</div>

<br>
<br>
<a href="javascript:showMenu(true)">show menu</a>
<a href="javascript:showMenu(false)">hide menu</a>

<div id="dropDownMenu" style="DISPLAY:none;BACKGROUND-COLOR: red; LEFT: 10pt; POSITION: absolute; TOP: 1pt ">
Menu<br>
Menu<br>
Menu<br>
</div>

it freezes the select box. it only works on IE, since the problem is only on IE it will work fine. it might only work on IE 5.5+ though im not sure.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum