asp:text input styles getting cleared on full load

[Brett]

Hi!

I'm running PIE(http://css3pie.com/) and am trying to style my <asp:textbox> inputs using my own custom CSS.   When the page first loads, the CSS styles I have written are applied, but then once all the javascript runs on the page and the telerik style stuff appears, all of the CSS for my text input boxes get cleared in IE, and in Chrome a bunch of them just get overridden.  

I have added the tags EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" to an input to see if it had an effect, but nothing so far. 

In the pictures attached I show the <asp:textbox> input (login name) having loaded the CSS correctly and the regular non css <input type="textbox"> loaded at the bottom with the telerik Radbutton not loaded yet (on the login button).

The second image shows the login name input as totally blank, the other inputs having applied the CSS3 work that PIE applies, and the Telerik Radbutton styles applied.   

The css looks like this:

HTML BODY input[type=text]
{
color: #777c75;
padding: 6px 10px;
 border: 1px solid #9dabb8;
width: 200px;
-pie-background:url('/images/cssStyle/searchInputBackground.png') repeat-x 0px 0px;
background:  url('/images/cssStyle/searchInputBackground.png') repeat-x;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
behavior: url(/includes/PIE.htc);

}

The HTML looks like this after being fully loaded:

<input name="ctl00$MasterPage$UserWelcome1$UserNameTextBox" class=" pie_first-child      " id="ctl00_MasterPage_UserWelcome1_UserNameTextBox" style="width: 145px;" _pieId="_19" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False" />

And the aspx looks like this:

<telerik:RadAjaxPanel ID="LoginPanel" runat="server" Visible="False" meta:resourcekey="LogoutPanelResource1"
       EnableAJAX="True" Enabled="True" LoadingPanelID="RadAjaxLoadingPanel2">
       <asp:Literal runat="server" ID="boxstart"></asp:Literal>
       <div style="float: right">
           <a id="ResendPasswordLink" onclick="return ExitPage();" href="~/Login/ResetPassword.aspx"
               runat="server">
               <asp:Literal ID="passwordLink" runat="server"></asp:Literal>
           </a>
       </div>
       <div>
           <span style="font-size: 18px; font-weight: bold;">
               <asp:Literal ID="loginText" runat="server" />
           </span>
       </div>
       <div class="loginForm">
           <asp:Literal ID="loginName" runat="server" />
           <asp:TextBox  ID="UserNameTextBox" runat="server" Width="145px" meta:resourcekey="UserNameTextBoxResource1"  EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" />
           <asp:Literal ID="password" runat="server" />
           <asp:TextBox ID="UserPassword" runat="server" Width="75px" TextMode="Password" meta:resourcekey="UserPasswordResource1" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" />
           <telerik:RadButton runat="server" ID="RadLogin" OnClick="RadLoginClick" />
       </div>
       <asp:CheckBox ID="RememberMeChk" runat="server" meta:resourcekey="RememberMeChkResource1">
       </asp:CheckBox>
       <asp:Label ID="RememberMe" Style="color: Black" runat="server" meta:resourcekey="RememberMeResource1"></asp:Label>
       <asp:CustomValidator runat="server" ID="CustomValidator1" Display="None" EnableClientScript="False"></asp:CustomValidator>
       <asp:ValidationSummary runat="server" ID="WelcomeUserValidationSummary" ForeColor="Red"
           ShowSummary="True" />
       <asp:Literal runat="server" ID="boxstop"></asp:Literal>
   </telerik:RadAjaxPanel>

[Galin]

Hello,

Only the RadFormDecorator decorates the regular <asp:textbox>, but based on the provided markup it seems you are not using it.

However, in case you are setting EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" the provided styles should work.

Additionally, you can look at this blog post.

Greetings,
Galin
the Telerik team