Radbutton text not shown for different browsers

3 posts, 0 answers
  1. Jacques
    Jacques avatar
    8 posts
    Member since:
    Mar 2013

    Posted 20 Jan Link to this post

    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. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 22 Jan Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jacques
    Jacques avatar
    8 posts
    Member since:
    Mar 2013

    Posted 29 Jan in reply to Danail Vasilev Link to this post

    Hi Danail,

    Thank you for solving the issue, it works.

    Regards,
    Marcel
Back to Top