styling up my auto suggestion menu

I have an auto suggestion box for my form. When someone types in a few letters in an input field, the script brings up a list of choices that relate to what was typed in. So for example, if the user typed in ‘Sa’, a list of names beginning with ‘Sa’ will pop up, and the user can select from one.

The problem is that the list of choices can be very long, and it pushes the rest of my site content down. I want the box to have its own layer if you know what I mean so that it overlaps the rest of my content. Also, because the list can be very long, I want there to be a fixed height for the box with a scrollbar, so the user will scroll through the list of choices.

[code]
#inputtext {
font-family: verdana;
color: #3d3d3d;
}

#suggestions ul {
margin-top: 0px;
margin-left: 70px;
}

#suggestions li {
width: 200px;
background-color: #e0eefa;
list-style-type: none;
}

#suggestions li a:hover {
background-color: #3d3d3d;
color: #FFF;
display:block;
}

#suggestions a:link, #suggestions a:active, #suggestions a:visited {
text-decoration: none;
color: #6EADE7;
}
[/code]

HTML

[code]
<form action=”functions.php” method=”post”>
<input name=”action” type=”hidden” value=”dexsearch” />
<p>Search Pok&eacute;dex: <input type=”text” name=”pokemon” id=”inputtext” onkeyup=”suggest(this.value)” /> <input type=”submit” name=”submit” value=”Search” class=”submit” /></p>
</form>
<div id=”suggestions”> </div>
[/code]

Now I’ve tried something like:

#suggestions li {
width: 200px;
background-color: #e0eefa;
list-style-type: none;
[b]overflow: auto;
height: 200px;[/b]
}

but that didn’t work. All it did was create 200px height in between each suggestion and not the whole box in general. I don’t know if it’s needed or not, but here’s my javascript just in case.

[code]
var xmlHttp;

function suggest(str) {

if (str.length==0) {
document.getElementById(“suggestions”).innerHTML=””;
return;
}

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert (“Browser does not support HTTP Request”);
return;
}

var url=”includes/autosuggest.php”;
url=url+”?query=”+str;
url=url+”&sid=”+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}

function correct(str) {

var elem = document.getElementById(“inputtext”);
elem.value=trim(str);
document.getElementById(“suggestions”).style.display = ‘none’;

}

function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”){
var split = xmlHttp.responseText.split(“,”);
var list = “”;

if(split[0] != “”) {
for(var i = 0; i < split.length; i++) {
list+=”<li><a href=”#” onclick=”javascript: correct(‘”+split[i]+”‘);”>”+split[i]+”</a></li>”;
}

if(list != “”) {
list +=”</ul>”;
list = “<ul>” + list;
}
}

document.getElementById(“suggestions”).innerHTML=list;
document.getElementById(“suggestions”).style.display = ‘block’;
}
}

function GetXmlHttpObject() {
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try {
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}catch (e){
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}

function trim(str) {
if (str != null) {
var i;
for (i=0; i<str.length; i++) {
if (str.charAt(i)!=” “) {
str=str.substring(i,str.length);
break;
}
}

for (i=str.length-1; i>=0; i–) {
if (str.charAt(i)!=” “) {
str=str.substring(0,i+1);
break;
}
}

if (str.charAt(0)==” “) {
return “”;
} else {
return str;
}
}

return null;
}
[/code]

So can anyone help?

Also in #CSS _↴