Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Radbutton text not shown for different browsers

2 Answers 180 Views
Button
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 1
Jacques asked on 20 Jan 2016, 07:07 AM
ie.png
chrome.png
firefox.png

Hi there,

I have a problem displaying the text on a RadButton for different browsers.

When I use IE (version 10) the text is shown, but by using Chrome or Firefox the text is not shown (see examples).
The Radbutton is part of a skin and created with Telerik stylebuilder.
Below you will find the css used.

Does anybody know why the text is only shown by using IE?

Regards,

Marcel

 

.RadButton_YaleButton {
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
font-size: 12px;
}
.RadButton_YaleButton.rbSkinnedButton, .RadButton_YaleButton .rbDecorated, .RadButton_YaleButton .rbSecondaryIcon, .RadButton_YaleButton.rbVerticalButton, .RadButton_YaleButton.rbVerticalButton .rbDecorated {
background-image: none;
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
font-size: 12px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.RadButton_YaleButton.a.RadButton input.rbDecorated, .RadButton_YaleButton.a.RadButton input.rbDecorated, .RadButton_YaleButton.a.RadButton input.rbDecorated:active, .RadButton_YaleButton.a.RadButton input.rbDecorated:focus {
background-color: transparent;
border: 0;
}
}
.RadButton_YaleButton .rbSplitRight, .RadButton_YaleButton .rbSplitLeft {
background-image: url('Button/ButtonSprites.gif');
}
.RadButton_YaleButton .rbSplitRight, .RadButton_YaleButton.rbLinkButton .rbSplitRight {
background-position: -1px 0;
background-color: #c6c6c6;
border-left: 1px solid #7e7e7e;
}
.RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitRight {
background-position: -1px 0;
}
.RadButton_YaleButton .rbSplitRight {
_right: -1px;
}
.RadButton_YaleButton.rbDisabled .rbSplitRight {
_right: 0;
}
.RadButton_YaleButton.rbLinkButton .rbSplitRight {
background-color: #e2e2e2;
border-left: 1px solid #7e7e7e;
}
.RadButton_YaleButton .rbSplitRight:hover, .RadButton_YaleButton.rbLinkButton .rbSplitRight:hover {
background-color: #ffe79c;
border-left: 1px solid #c98400;
}
.RadButton_YaleButton .rbSplitRight:focus, .RadButton_YaleButton .rbSplitRight:active, .RadButton_YaleButton.rbLinkButton .rbSplitRight:focus, .RadButton_YaleButton.rbLinkButton .rbSplitRight:active {
background-color: #ffa517;
border-left: 1px solid #ca4b0c;
}
.RadButton_YaleButton .rbSplitLeft, .RadButton_YaleButton.rbLinkButton .rbSplitLeft {
background-position: -1px 0;
background-color: #e2e2e2;
border-right: 1px solid #7e7e7e;
}
.RadButton_YaleButton .rbSplitLeft:hover, .RadButton_YaleButton.rbLinkButton .rbSplitLeft:hover {
background-color: #ffe79c;
border-right: 1px solid #c98400;
}
.RadButton_YaleButton.rbDisabled .rbSplitLeft, .RadButton_YaleButton.rbDisabled .rbSplitLeft:hover, .RadButton_YaleButton.rbDisabled .rbSplitLeft:focus, .RadButton_YaleButton.rbDisabled .rbSplitLeft:active, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft:hover, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft:active, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft:focus, .RadButton_YaleButton.rbDisabled .rbSplitRight, .RadButton_YaleButton.rbDisabled .rbSplitRight:hover, .RadButton_YaleButton.rbDisabled .rbSplitRight:focus, .RadButton_YaleButton.rbDisabled .rbSplitRight:active, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitRight, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitRight:hover, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitRight:active, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitRight:focus {
background-color: #dfdfdf;
background-position: -1px 0 !important;
}
.RadButton_YaleButton .rbDisabled .rbSplitRight, .RadButton_YaleButton .rbDisabled .rbSplitRight:hover, .RadButton_YaleButton .rbDisabled .rbSplitRight:focus, .RadButton_YaleButton .rbDisabled .rbSplitRight:active, .RadButton_YaleButton .rbDisabled .rbSplitLeft, .RadButton_YaleButton .rbDisabled .rbSplitLeft:hover, .RadButton_YaleButton .rbDisabled .rbSplitLeft:focus, .RadButton_YaleButton .rbDisabled .rbSplitLeft:active {
_background-position: -1px 0 !important;
}
.RadButton_YaleButton.rbDisabled .rbSplitLeft, .RadButton_YaleButton.rbDisabled .rbSplitLeft:hover, .RadButton_YaleButton.rbDisabled .rbSplitLeft:focus, .RadButton_YaleButton.rbDisabled .rbSplitLeft:active, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft:hover, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft:active, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitLeft:focus {
border-right: 1px solid #9b9b9b;
}
.RadButton_YaleButton.rbDisabled .rbSplitRight, .RadButton_YaleButton.rbLinkButton.rbDisabled .rbSplitRight {
border-left: 1px solid #9b9b9b;
}
.RadButton_YaleButton .rbSplitLeft:focus, .RadButton_YaleButton .rbSplitLeft:active, .RadButton_YaleButton.rbLinkButton .rbSplitLeft:focus, .RadButton_YaleButton.rbLinkButton .rbSplitLeft:active {
background-color: #ffa517;
border-right: 1px solid #ca4b0c;
}
.RadButton_YaleButton.rbSkinnedButton, .RadButton_YaleButton.rbVerticalButton, .RadButton_YaleButton .rbDecorated {
background-color: #e2e2e2;
}
.RadButton_YaleButton.rbSkinnedButton, .RadButton_YaleButton.rbVerticalButton {
border: 4px solid #e6a900;
border-radius: 12px;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}
.RadButton_YaleButton.rbSkinnedButton:hover, .RadButton_YaleButton.rbVerticalButton:hover, .RadButton_YaleButton:hover .rbDecorated {
background-color: #e6a900;
color: #fff;
text-decoration: underline;
}
.RadButton_YaleButton.rbSkinnedButton:hover, .RadButton_YaleButton.rbVerticalButton:hover {
border: 4px solid #e6a900;
}
.RadButton_YaleButton.rbSkinnedButtonChecked, .RadButton_YaleButton.rbSkinnedButtonChecked:hover, .RadButton_YaleButton.rbSkinnedButtonChecked .rbDecorated, .RadButton_YaleButton.rbSkinnedButtonChecked:hover .rbDecorated {
background-color: #ffa517;
}
.RadButton_YaleButton .rbToggleCheckbox, .RadButton_YaleButton .rbToggleCheckboxChecked, .RadButton_YaleButton .rbToggleCheckboxFilled, .RadButton_YaleButton .rbToggleRadio, .RadButton_YaleButton .rbToggleRadioChecked {
background-image: url('Common/radFormToggleSprite.png');
_background-image: url('Common/radFormToggleSpriteIE6.png');
}
.RadButton_YaleButton.rbToggleButton, .RadButton_YaleButton.rbToggleButton.rbDisabled, .RadButton_YaleButton.rbToggleButton.rbDisabled:hover {
color: black;
}
.RadButton_YaleButton.rbDisabled .rbDecorated, .RadButton_YaleButton.rbDisabled:hover .rbDecorated, .RadButton_YaleButton.rbToggleButton:hover {
color: #999;
}
.RadButton_YaleButton.RadButton.rbLinkButton {
background-color: #e2e2e2;
border: 1px solid #7e7e7e;
text-decoration: none;
color: black;
}
.RadButton_YaleButton.RadButton.rbLinkButton:hover {
background-color: #ffe79c;
color: #882501;
}
.RadButton_YaleButton.RadButton.rbLinkButtonChecked, .RadButton_YaleButton.RadButton.rbLinkButtonChecked:hover {
background-color: #ffa517;
color: #882501;
border: 1px solid #ca4b0c;
}
.RadButton_YaleButton.rbLinkButtonChecked:hover {
color: #882501;
border: 1px solid #c98400;
}
.RadButton_YaleButton.rbSkinnedButton, .RadButton_YaleButton .rbDecorated {
height: 22px;
}
.RadButton_YaleButton.rbSkinnedButton.rbDisabled, .RadButton_YaleButton.rbVerticalButton.rbDisabled, .RadButton_YaleButton.rbLinkButton.rbDisabled, .RadButton_YaleButton.rbLinkButton.rbDisabled:hover {
background-color: #E6BE3E;
border: 4px solid #E6BE3E;
color: #fff;
text-decoration: none;
}
.RadButton_YaleButton.rbSkinnedButton.rbDisabled .rbDecorated, .RadButton_YaleButton.rbLinkButton.rbDisabled, .RadButton_YaleButton.rbLinkButton.rbDisabled:hover, .RadButton_YaleButton.rbVerticalButton.rbDisabled .rbDecorated {
background-color: #E6BE3E;
color: #fff;
text-decoration: none;
}
.RadButton_YaleButton.rbLinkButton, .RadButton_YaleButton.rbLinkButton:hover {
border: 1px solid #7e7e7e !important;
}
.RadButton_YaleButton.rbLinkButton.rbRounded {
border-radius: 0;
}


.RadButton_YaleButton .rbDecorated {
color: rgb(255, 255, 255);
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-color: rgb(230, 169, 0);
}
.rbSkinnedButton.RadButton_YaleButton {
background-color: rgb(230, 169, 0);
}

.RadButton_YaleButton .rbDecorated {
font-size: 12px;
}





.RadButton_YaleButton .rbDecorated {
font-size: 12px;
line-height: 14px;
height: 0px;
}



 

 


2 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 22 Jan 2016, 11:07 AM
Hi Jacques,

You should set some height to the input that stores the text:

.RadButton_YaleButton .rbDecorated {
    font-size: 12px;
    line-height: 14px;
    height: 14px;
}


Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jacques
Top achievements
Rank 1
answered on 29 Jan 2016, 10:37 AM
Hi Danail,

Thank you for solving the issue, it works.

Regards,
Marcel
Tags
Button
Asked by
Jacques
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Jacques
Top achievements
Rank 1
Share this question
or