This is a migrated thread and some comments may be shown as answers.

RadButton not displaying correctly in IE8

6 Answers 44 Views
Button
This is a migrated thread and some comments may be shown as answers.
Ida
Top achievements
Rank 1
Ida asked on 10 Apr 2014, 08:46 AM
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

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 10 Apr 2014, 10:23 AM
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.
0
Ida
Top achievements
Rank 1
answered on 10 Apr 2014, 12:34 PM
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}
0
Shinu
Top achievements
Rank 2
answered on 11 Apr 2014, 02:56 AM
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.
0
Ida
Top achievements
Rank 1
answered on 11 Apr 2014, 03:27 PM
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>
0
Akshay
Top achievements
Rank 1
answered on 17 Nov 2014, 10:08 PM
Same problem exists in my application and using DIV tag didn't help. Rather I dont want to use DIV tag.
Please, guide through!
0
Danail Vasilev
Telerik team
answered on 19 Nov 2014, 12:15 PM
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.

 
Tags
Button
Asked by
Ida
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Ida
Top achievements
Rank 1
Akshay
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or