RadButton not displaying correctly in IE8

[Ida]

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

[Shinu]

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.

[Ida]

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}

[Shinu]

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.

[Ida]

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>

[Akshay]

Same problem exists in my application and using DIV tag didn't help. Rather I dont want to use DIV tag.
Please, guide through!

[Danail Vasilev]

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