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:
The HTML looks like this after being fully loaded:
And the aspx looks like this:
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
>