CSS class not being applied to input element on asynchronous call back

I am using the following 开发者_JAVA百科CSS class to hide a textbox in an asp:UpdatePanel to accept input from a USB card reader.

<style type="text/css">
    .USBBox
    {
        position: absolute;
        left: -999em;
    }
</style>

When I click an asp:LinkButton control that is configured to be an asp:AsyncPostBackTrigger for the update panel the control appears on the page and the CSS class is not applied to the asp:TextBox control.

This behavior is displayed in IE7. It works as expected in FireFox 3.5.7

What would cause this behavior and how do I resolve it

There my be a specificity issue. Try

input.USBBox{ position:absolute!important; left:-999px!important; }

And if it works, back out of the !important tags to see what actually caused the issue.

Also declare display:block; just in case.

I think you should use:

.USBBox
{
    display: none;
}

or maybe use a asp:HiddenField instead of a textbox.

try

.USBBox
{
    display: block;
    width: 100px; /* or however wide you want it */
    position: absolute;
    left: -999em;
    background: #ff0000; /* visually ensure the class style is being applied, remove it later */
}

position should only work on items that are displayed as a block. form items by default are displayed inline.

also just for giggles set the background color just to make sure the input box is taking class.

Could it be that the new control comes with multiple classes ?

Because IE is having issues when combining classes on a single element..