Button renders differently in IE

3 posts, 1 answers
  1. RP2414
    RP2414 avatar
    14 posts
    Member since:
    Jul 2011

    Posted 04 Mar 2014 Link to this post

    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.

    <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. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 07 Mar 2014 Link to this post

    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:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. RP2414
    RP2414 avatar
    14 posts
    Member since:
    Jul 2011

    Posted 07 Mar 2014 Link to this post

    Thank you!
Back to Top