Dom DIV displaying behind below input box

[staraba]

Hello all,

I am getting extremely frustrated, as I cannot see what I am doing wrong. I have an auto-suggest, and will need for there to be one below it. They are activated via a text box, and the div containing the suggestions is created by the DOM.

As I cannot post the exact code, I will post as much as I can - at least, that which is relevant.

The CSS:

	.domSelect{
		background-color:#ffffff; 
		position:absolute;
		left:0;
		color:#000000;
		width: 9em;
		overflow-y:auto;
		overflow:-moz-auto-vertical;
		border: solid thin #f8f8f8;
		cursor: default;
		display:block;
		top:22; 
		z-index:9040;
	}
	...
	#as1, #as2, #as12, #as22{position:relative; display:inline}

The Javascript:

       var newDiv = document.createElement('div');
	newDiv.id = 'ASDiv' + el.id;
	newDiv.className = 'domSelect';
	var setHeight = 78;
       ....
       $(newDiv).insertAfter(el); //el being the input box id

The HTML:

<label><input type="radio" name="as1Input" id="as1Input" value="3" />From: </label>
<div id="as1"><input type="text" name="as1Input" id="as1Input" size="10" /></div>
to:
<div id="as2"><input type="text" name="as2Input" id="as2Input"size="10" /></div>
<br /><br /><br /><br />
<label><input type="radio" name="as12Radio" id="as12Radio" value="3" />From: </label>
<div id="as12"><input type="text" name="as12Input" id="as12Input" size="10" /></div>
to:
<div id="as22"><input type="text" name="as22Input" id="as22Input"size="10" /></div>
<br />

The main problem is that in IE only, the autosuggest div from one of the top inputs (as1Input or as2Input) displays behind the bottom two - no matter what or where I set the z-Index. Any help?