Hello,
RadButton renders differently in IE and Chrome. Please see attached images.
The text in the button in IE is little bottom, not aligned vertically center.
RadButton renders differently in IE and Chrome. Please see attached images.
The text in the button in IE is little bottom, not aligned vertically center.
<telerik:RadButton ID="rbtnInternal" runat="server" Text="Text in the button" Skin="Metro" BorderColor="#11aacf" Style="border: 3; border-radius: 8px; box-shadow: 1px 2px 5px #666;" Height="50px" Width="300px" Font-Bold="true" PostBackUrl="~/Internal/Default.aspx" />2 Answers, 1 is accepted
0
Accepted
Hi,
Thanks for contacting Telerik support. You didn't mentioned which IE browser you are testing, but I think it should be IE7 or IE in compatibility mode.
Note that you are using custom styles to the button, and it is a developer's responsibility in that case to make the button consistent in all browsers. Also note, that you are using CSS3 properties which are available in IE9 and above, and again, if you are in compatibility mode even with IE11, the CSS 3 styles will not be applied. Also you have some wrong CSS styles such as: border: 3; - which will not apply any styling.
You should try something like that:
Now it will look consistent with 3px blue border around the button, 8px border radius and a shadow. Note, that in IE7 and IE8, including compatibility in all IEs the shadows and rounded borders will not be applied as they do not understand CSS 3, but the text will be at least aligned properly in the middle in all browsers.
Regards,
Bozhidar
Telerik
Thanks for contacting Telerik support. You didn't mentioned which IE browser you are testing, but I think it should be IE7 or IE in compatibility mode.
Note that you are using custom styles to the button, and it is a developer's responsibility in that case to make the button consistent in all browsers. Also note, that you are using CSS3 properties which are available in IE9 and above, and again, if you are in compatibility mode even with IE11, the CSS 3 styles will not be applied. Also you have some wrong CSS styles such as: border: 3; - which will not apply any styling.
You should try something like that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> span.rbLinkButton.rbRounded.btnStyle { border: 3px solid #11aacf; border-radius: 8px; box-shadow: 1px 2px 5px #666; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadButton ID="rbtnInternal" runat="server" Text="Text in the button" Skin="Metro" CssClass="btnStyle" ButtonType="SkinnedButton" Height="50px" Width="300px" Font-Bold="true" PostBackUrl="~/Internal/Default.aspx" /> </form></body></html>Now it will look consistent with 3px blue border around the button, 8px border radius and a shadow. Note, that in IE7 and IE8, including compatibility in all IEs the shadows and rounded borders will not be applied as they do not understand CSS 3, but the text will be at least aligned properly in the middle in all browsers.
Regards,
Bozhidar
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.
0
Veer
Top achievements
Rank 1
Rank 1
answered on 07 Mar 2014, 05:05 PM
Thank you!