Autosuggest drops down in wrong position first time I search..

[Fenhopi]

Hi, I have an auto suggest that suggests users as I'm typing.

The first time I type in the search field, the drop down oddly places itself over to the right side, however when I do another search right after it's in the right place..

 

The site is:http://shairzy.byethost12.com if you want to see the problem in action (quick sign up required).

 

Here's the CSS i use:

#container {
width: 150px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}


/*  Styling for Suggestion Box Container  */
.suggestionsBox {
position: absolute;
width: 150px;
background-color: #212427;
border: 2px solid #000;
color: #555;
padding: 5px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

#inputString {
width: 150px;
padding: 5px;

}


.suggestionList {
margin: 0px;
padding: 0px;
}


/*  Individual Search Results  */
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 7px;
cursor: pointer;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
list-style-type: none;
}

/*  Hover effect  */
.suggestionList li:hover {
background-color: #5cc1dd;
font-weight: bold;
}

 

HTML part:

<form>
    <div>
        <h3>Band Name</h3>
        <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
    </div>
    
    <!-- hide our suggesetion box to begin with-->
    <div class="suggestionsBox" id="suggestions" style="display: none;">
        <img src="upArrow.png" style="position: relative; top: -20px; left: 30px;" alt="upArrow" />
        <div class="suggestionList" id="autoSuggestionsList"></div>
    </div>
</form>
</div>