ASP.net text-boxes are acting flaky

Question

I have searched for days and can find no answers that solve my problem. I have a simple web-form website, on it are some text-boxes that show when the user selects the "custom search" option. When I test locally it works, but when I publish it to our web-server the text-boxes stop working. I noticed that the hover cursor on the web-server switches from the expected "text" cursor to the "pointer" cursor. The "text" cursor shows If I move the cursor to the edge of the text-box, and allows me to click the text-box and type text as needed, but when I move the mouse so no part of it is touching the edge of the text-box (but is inside the text-box) then it becomes the pointer cursor and no matter how hard I press the mouse button I can not activate the text-box to type in it. If I make a selection on the drop-down list first, and click tab, focus will move to the text-box.

Here is the mark-up code of the text-boxes:

<asp:Label ID="lbl_Fname" Text="First Name" CssClass="FN-lbl" runat="server" />
<asp:DropDownList ID="ddl_Fname" CssClass="FN-drop" Width="12%" runat="server">
    <asp:ListItem Value="0">-- Select One --</asp:ListItem>
    <asp:ListItem Value="=">equals</asp:ListItem>
    <asp:ListItem Value="<>">does not equal</asp:ListItem>
    <asp:ListItem Value="&gt;">greater than</asp:ListItem>
    <asp:ListItem Value="&gt=">greater than or equal to</asp:ListItem>
    <asp:ListItem Value="&lt;">less than</asp:ListItem>
    <asp:ListItem Value="&lt;=">less than or equal to</asp:ListItem>
    <asp:ListItem Value="like">contains</asp:ListItem>
    <asp:ListItem Value="not like">doesn&#39;t contain</asp:ListItem>
</asp:DropDownList>&nbsp;&nbsp;
<asp:TextBox ID="txt_Fname" CssClass="FN-txt" Width="16%" runat="server"></asp:TextBox>

Here is the Css entry (note: the comment isn't in my CSS just here on this posting):

.FN-txt
        {
            position: absolute; 
            left: 320px; 
            top: 120px; 
            width: 100px; 
            height: 20px; 
            cursor: text; /*an attempt to get the cursor to behave, it didn't help*/
        }

I've reviewed every post on stack-overflow regarding asp.net and text-boxes, and code project, and logged many hours in google (or blackle.com) word-smithing my search terms. I attempted to post a picture of the GUI, but apparently noobs can't post pictures.

----------------- Follow up notes ------------------------ Here is the code I added to the markup:

OnSelectedIndexChanged="ddl_Email_SelectedIndexChanged" AutoPostBack="true"

Here is the code behind:

protected void ddl_Fname_SelectedIndexChanged(object sender, EventArgs e)
{
    if (ddl_Fname.SelectedValue != "0")
    {
        txt_Fname.Focus();
    }
}

Now I want to know why this should of fixed it. I attempted mtzaldo's solution and by adding it to just Fname, when I saw that a combination of my changes and his suggestion seemed to do the trick, I removed his z-index from the CSS and tested it again and it still was working.

Answer 1

I believe the solution was adding "cursor: text" to the CSS, and that it just took clearing the cache before I could see the issue fixed.

Answer 2

In the css class try to add a big z-index value. ie z-index:999; If this works it's because a element if over your textbox and it does have a transparent background.

Edit: are you using different browsers? like IE to test the deployed version and FF to test your local version?