Display problem of drop down and div

Hi,

I have a html page where I have
One text box
one hyperlink
3 dropdowns
displayed in this order.

On clicking of hyper link I am showing a autocomplete like list using divs and UL/LI tags.
This list is displayed properly in all other browsers except IE.

In IE my list is going behind the dropdowns. It means the drop downs apear on the list instead of behind it.
I have nested divs in my page like.
<div>
<text box>
<div of list></end div of list>
<drop down1>
<drop down1>
</div>
Please, can any body tell me what is causing this and how to correct it?
Thanks in advance.

"ap ch",

There aren't may rules that you need to worry about here on the Ranch, but one that we take very seriously regards the use of proper names. Please take a look at the JavaRanch Naming Policy and adjust your display name to match it.

In particular, your display name must be a first and a last name separated by a space character, and must not be obviously fictitious.

Thanks!
bear
Forum Bartender

It was not a fictitious name. I had typed initials.
I hope now you don't have problem with it.

Regards
Aparna

Hi,

Below is my code. The problem is in display of IE.
Please help, urgent.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}

</style>
<script type="text/JavaScript">
function createDiv()
{
this.div = document.getElementById("base");
var ul = document.createElement('ul');
//Create an array of LI's for the words.
for(var i=0;i<3; i++)
{
var word = "a "+i;

var li = document.createElement('li');
var a = document.createElement('a');
a.href="#";
a.innerHTML = word;
li.appendChild(a);

ul.appendChild(li);
}

this.div.replaceChild(ul,this.div.childNodes[0]);
this.el = document.getElementById("abc1");
var x = 0;
var y = 0;

x =findPosX(this.el);
y = findPosY(this.el);

this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
this.div.style.display = 'block';

}
function findPosX(obj)
{
var leftOffset = 0;
if (obj.offsetParent)
{
while (obj.offsetParent )
{
leftOffset += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x) //for NN4
{
leftOffset = obj.x;
}
return leftOffset;

}

function findPosY(obj)
{
var topOffset = 0;
var cnt =0;
if (obj.offsetParent)
{
var explorer= navigator.appName ;
if(explorer!='Netscape')
{
while (obj.offsetParent && cnt < 3)
{
if(obj.tagName == 'DIV')
cnt = cnt + 1;
if(cnt == 2)
topOffset += this.el.offsetHeight;
else
topOffset += obj.offsetTop;
obj = obj.offsetParent;
}
}else{
while (obj.offsetParent && cnt < 1)
{

topOffset += obj.offsetTop;
obj = obj.offsetParent;
cnt ++;
}
topOffset += this.el.offsetHeight;
}
}
else if (obj.y) // for NN4
{
topOffset = obj.y;
}
return topOffset;

}
</script>
</HEAD>

<BODY>
<div>
<p>
<input type="text" id="abc1"><input type="button" onklick="createDiv();">
<DIV id = "base" name="base" style="position: absolute"><ul></ul></DIV>
</p>
<select name="abc">
<option>1sssssssssssssssssssss</option>
<option>2eeeeeeeeeeeeee</option>
<option>3</option>
</select>

</div>
</BODY>
</HTML>

Regards
Aparna