RadButton not displaying correctly in IE8

7 posts, 0 answers
  1. Ida
    Ida avatar
    55 posts
    Member since:
    Mar 2013

    Posted 10 Apr 2014 Link to this post

    Hello,

    I have a RadButton on a webpage which is using the Default skin but is not displaying correctly in IE8.

    The button renders correctly in Chrome and Firefox.

    I have attached a screenshot to show what the button looks like in IE8.

    Any advice please?

    Thank you, Ida
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2014 in reply to Ida Link to this post

    Hi Ida,

    The provided information is not enough to replicate the issue. Please have a look into the sample code snippet which works fine at my end. Please provide your full code with CSS for further help.

    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" Text="Add Sample" Skin="Default">
    </telerik:RadButton>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ida
    Ida avatar
    55 posts
    Member since:
    Mar 2013

    Posted 10 Apr 2014 in reply to Shinu Link to this post

    Hi Shinu, here is the CSS code:


    .RadButton_AFBI{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:12px}.RadButton_AFBI .rbDecorated{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:12px}.RadButton_AFBI.rbSkinnedButton,.RadButton_AFBI .rbDecorated,.RadButton_AFBI.rbVerticalButton,.RadButton_AFBI.rbVerticalButton .rbDecorated,.RadButton_AFBI .rbSplitRight,.RadButton_AFBI .rbSplitLeft{background-image:url('Common/radFormSprite.png');_background-image:url('Common/radFormSpriteIE6.png');color:#4e5a5c}.RadButton_AFBI .rbToggleCheckbox,.RadButton_AFBI .rbToggleCheckboxChecked,.RadButton_AFBI .rbToggleCheckboxFilled,.RadButton_AFBI .rbToggleRadio,.RadButton_AFBI .rbToggleRadioChecked{background-image:url('Common/radFormToggleSprite.png');_background-image:url('Common/radFormToggleSpriteIE6.png')}.RadButton_AFBI.rbToggleButton,.RadButton_AFBI.rbToggleButton.rbDisabled:hover{color:#232626}.RadButton_AFBI.rbToggleButton:hover{color:#268394}.RadButton_AFBI.RadButton.rbLinkButton{background-color:#d3e1e3;border:1px solid #79878a;_border:1px solid #79878a!important;color:#4e5a5c}.RadButton_AFBI.RadButton.rbLinkButton:hover{background-color:#97dae6;_border:1px solid #79878a!important;color:#268394}.RadButton_AFBI.RadButton.rbLinkButtonChecked,.RadButton_AFBI.RadButton.rbLinkButtonChecked:hover{background-color:#43a4b5;color:#18525c;border:1px solid #46919e}.RadButton_AFBI.rbLinkButton.rbDisabled,.RadButton_AFBI.rbLinkButton.rbDisabled:hover{background-color:#f0f0f0;border:1px solid #b5c2c4;color:#787878}.RadButton_AFBI.rbLinkButton:hover .rbSplitLeft,.RadButton_AFBI.rbLinkButton:hover .rbSplitRight{background-color:#d3e1e3}.RadButton_AFBI.rbLinkButton .rbSplitRight{border-left:1px solid #79878a}.RadButton_AFBI.rbLinkButton .rbSplitRight:hover{background-color:#97dae6;border-left:1px solid #6db9c7}.RadButton_AFBI.rbLinkButton .rbSplitRight:active,.RadButton_AFBI.rbLinkButton .rbSplitRight:focus{background-color:#43a4b5;border-left:1px solid #6db9c7}.RadButton_AFBI.rbLinkButton .rbSplitLeft{border-right:1px solid #79878a}.RadButton_AFBI.rbLinkButton .rbSplitLeft:hover{background-color:#97dae6;border-right:1px solid #6db9c7}.RadButton_AFBI.rbLinkButton .rbSplitLeft:active,.RadButton_AFBI.rbLinkButton .rbSplitLeft:focus{background-color:#43a4b5;border-right:1px solid #6db9c7}.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitLeft,.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitLeft:hover,.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitLeft:active,.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitLeft:focus{border-right:1px solid #b5c2c4}.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitRight,.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitRight:hover,.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitRight:active,.RadButton_AFBI.rbLinkButton.rbDisabled .rbSplitRight:focus{border-left:1px solid #b5c2c4}.RadButton_AFBI.rbLinkButton.rbRounded{border-color:#79878a;color:#4e5a5c;background-color:#d3e1e3;background-image:-webkit-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:-moz-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:-ms-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:-o-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:linear-gradient(top,#ebf3f5 0,#d1dee0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf3f5',endColorstr='#d1dee0',GradientType=0)}.RadButton_AFBI.rbLinkButton.rbRounded:hover{border-color:#6db9c7;color:#268394;background-color:#97dae6;background-image:-webkit-linear-gradient(top,#f0fbfc 0,#c6eef5 50%,#97dae6 50%,#d5f0f5 100%);background-image:-moz-linear-gradient(top,#f0fbfc 0,#c6eef5 50%,#97dae6 50%,#d5f0f5 100%);background-image:-ms-linear-gradient(top,#f0fbfc 0,#c6eef5 50%,#97dae6 50%,#d5f0f5 100%);background-image:-o-linear-gradient(top,#f0fbfc 0,#c6eef5 50%,#97dae6 50%,#d5f0f5 100%);background-image:linear-gradient(top,#f0fbfc 0,#c6eef5 50%,#97dae6 50%,#d5f0f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0fbfc',endColorstr='#d5f0f5',GradientType=0)}.RadButton_AFBI.rbLinkButton.rbRounded:active,.RadButton_AFBI.rbLinkButton.rbRounded:focus{border-color:#46919e;color:#18525c;background-color:#43a4b5;background-image:-webkit-linear-gradient(top,#bfedf5 0,#52bacc 50%,#43a4b5 50%,#7ccbd9 100%);background-image:-moz-linear-gradient(top,#bfedf5 0,#52bacc 50%,#43a4b5 50%,#7ccbd9 100%);background-image:-ms-linear-gradient(top,#bfedf5 0,#52bacc 50%,#43a4b5 50%,#7ccbd9 100%);background-image:-o-linear-gradient(top,#bfedf5 0,#52bacc 50%,#43a4b5 50%,#7ccbd9 100%);background-image:linear-gradient(top,#bfedf5 0,#52bacc 50%,#43a4b5 50%,#7ccbd9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfedf5',endColorstr='#7ccbd9',GradientType=0)}.RadButton_AFBI.rbLinkButton.rbRounded.rbDisabled,.RadButton_AFBI.rbLinkButton.rbRounded.rbDisabled:hover,.RadButton_AFBI.rbLinkButton.rbRounded.rbDisabled:active,.RadButton_AFBI.rbLinkButton.rbRounded.rbDisabled:focus{border-color:#b5c2c4;color:#787878;background-color:#f0f0f0;background-image:-webkit-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:-moz-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:-ms-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:-o-linear-gradient(top,#ebf3f5 0,#d1dee0 100%);background-image:linear-gradient(top,#ebf3f5 0,#d1dee0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf3f5',endColorstr='#d1dee0',GradientType=0);background-position:0 0}
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2014 in reply to Ida Link to this post

    Hi Ida,

    I have tried your code but no avail. Please have a look into the sample project which works fine at my end and my Telerik version is Q1 2014 SP1. Let me know the provided code is working for you. Please provide a sample code where I can reproduce the issue for further help.

    Thanks,
    Shinu.
  6. Ida
    Ida avatar
    55 posts
    Member since:
    Mar 2013

    Posted 11 Apr 2014 in reply to Shinu Link to this post

    Hi,
    We found a workaround of wrapping the RadButton in a DIV tag:

    <div style="overflow:auto"><telerik:RadButton ID="btnAddSurvey" runat="server" Text="Add Sample" Skin="Default"></telerik:RadButton></div>
  7. Akshay
    Akshay avatar
    2 posts
    Member since:
    Jun 2014

    Posted 17 Nov 2014 Link to this post

    Same problem exists in my application and using DIV tag didn't help. Rather I dont want to use DIV tag.
    Please, guide through!
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 19 Nov 2014 Link to this post

    Hi,

    I can suggest that you try the following troubleshooting steps:

       - It may be possible that some global style is affecting the appearance of the button. Does removing all of the custom styles on your page resolve the problem? If that is so you can start turning one by one the styles until you find and fix the problematic style rule. More information on the matter is available in the Distorted Appearance help article.
        - It may be possible that the browser is zoomed. Does resetting the browser zoom helps? More information on the matter is available in this blog post.
        - If you are not using latest official Telerik version - 2014.3.1024, does upgrading to it helps?

    If the above information do not help it would be better to paste below the buttons' setup, so that we can make an investigation further.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017