autocompleteextender position

Hello -

I am not able to get my autocompleteextender to show up directly beneath and aligned with my textbox. I am using IE 8.

Below is my code, css, and a screenshot of the autocompleteextender in action.

ASP.NET 3.5

thanks

// CSS    
.completionListElement
{ 
    visibility : hidden;
    margin : 0px! important;
    background-color : inherit;
    color : black;
    border : solid 1px gray;
    cursor : pointer;
    text-align : left;
    list-style-type : none;
    font-family : Verdana;
    font-size: 11px;
    margin-left:5px;
    line-height:20px; 
    padding:0px;
}
.listItem
{
    background-color: white;
    padding : 1px;
}     
.highlightedListItem
{
    background-color: #c3ebf9;
    padding : 1px;
}

/// ASPX
<form id="form1" runat="server">
    <div>
        
        <asp:ScriptManager ID="sm1" runat="server" />
        
        <asp:Label ID="lblEmpName" Text="Employee Name:" AssociatedControlID="txtEmpName" runat="server" />
        
        <asp:TextBox ID="txtEmpName" AutoPostBack="true" AutoComplete="off" 
                    runat="server" ontextchanged="txtEmpName_TextChanged1" /> 
                <asp:AutoCompleteExtender ID="ace1" TargetControlID="txtEmpName" ServiceMethod="GetSuggestions"
                    MinimumPrefixLength="2"  OnClientItemSelected="ace1_itemSelected" FirstRowSelected="true"
                    runat="server" CompletionInterval="1" 
                    CompletionListCssClass="completionListElement"
                    CompletionListItemCssClass="listItem"
                    CompletionListHighlightedItemCssClass="highlightedListItem" 
                    UseContextKey="True"/>
                    
                <asp:HiddenField ID="hdEmpID" runat="server" />
    </div>
    </form>

Select allOpen in new window