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

Question

I am using the following 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

Answer 1

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.

Answer 2

I think you should use:

.USBBox
{
    display: none;
}

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

Answer 3

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.

Answer 4

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

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