I have a web site developed in VS 2015 that contains a custom button skin (modified from the base button skin). It is basically a blue button with white text, with buttons appearing on predominately white backgrounds
I have the following in my Master page:
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false">
<Skins>
<telerik:SkinReference Path="/Skins" />
</Skins>
</telerik:RadSkinManager>
When I browse the site configured in IIS on my local workstation, or run in Debug in VS 2015, I see the buttons with the custom skin applied. It is present in IE, Chrome and Edge.
When I deploy the exact code to my production server, the background of the button appears white, with white text, on the white background. I can hover and click the area where the button should be, so the button is definitely there. The problem is, this is only happening in IE. Chrome and Edge show the button exactly like it was on the local workstation. Any workstation displaying the site from the production server using IE cannot see the buttons. By deductive reasoning, I assume the issue is with the Production Server or IIS.
The local workstation is Windows 10, IIS v10.0, with .NET framework 4.7.1 as its latest.
The server is Window Server 2012R2, IIS 8.5, with .NET framework 4.5 as its latest.
The website is set to target framework 4.5, and is using Telerik UI for ASP.NET AJAX 2018.1.117.45
The code is exactly the same in both dev and prod IIS, including the copied Telerik DLLs.
Since this is present on any workstation with IE accessing the site from the URL pointing to the production server, and does not happen with Chrome or Edge, I have to assume there is something missing, or not set correctly on the server.
I'm completely stumped! Any Ideas?
For Reference, here is the CSS from my custom button:
.RadButton_ARButton {
font-family: 'Segoe UI', sans-serif, Verdana;
/* Primary Button styles */
/* CheckBox and RadioButton Styles */
/* Right to Left Support */
color: white;
background-color: #1b4b66;
min-width: 30px !important;
}
/* FROM Button.css*/
.rbDecorated {
font-size: 10pt;
display: block;
*display: inline;
*zoom: 1;
height: 22px;
padding-left: 6px;
*padding-left: 8px;
padding-right: 10px;
border: 0;
text-align: center;
background-position: right -88px;
overflow: visible;
/*background-color: transparent;*/
outline: none;
cursor: pointer;
-webkit-border-radius: 0;
/* set default border-radius to 0 in mobile safari */
-webkit-appearance: none;
*line-height: 22px;
color: #ffffff;
background-color: #1b4b66;
}
RadButton_ARButton.rbButton {
padding: 0.42857em 0.85714em;
padding: 0.46429em 0.85714em\9;
line-height: normal; }
.RadButton_ARButton _:-ms-fullscreen, :root .RadButton_ARButton.rbButton {
padding: 0.46429em 0.85714em; }
.RadButton_ARButton.rbButton, .RadButton_ARButton .rbSplitPart {
border-color: #cccccc;
color: #ffffff;
background-color: #1b4b66;
background-image: linear-gradient(); }
.RadButton_ARButton.rbButton.rbHovered, .RadButton_ARButton .rbSplitPart.rbHovered, .RadButton_ARButton.rbButton:focus {
border-color: #c2c2c2;
color: #333333;
background-color: #e0e0e0;
background-image: linear-gradient();
box-shadow: inset 0 0 1px #ffffff; }
.RadButton_ARButton.rbButton:focus {
outline-width: thin;
outline-offset: -2px;
outline-color: #c2c2c2; }
.RadButton_ARButton.rbButton.rbSelected, .RadButton_ARButton.rbButton.rbToggled, .RadButton_ARButton.rbButton.rbSelected .rbSplitPart {
border-color: #c2c2c2;
color: #333333;
background-color: #e0e0e0;
background-image: linear-gradient();
color: #333333;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset; }
.RadButton_ARButton .rbSplitPart {
width: 2.28571em;
height: 2.28571em; }
.RadButton_ARButton .rbSplitPartRight {
margin: -0.35714em -0.85714em -0.21429em 0.35714em;
margin: -0.35714em -0.85714em -0.21429em 0.35714em\9; }
.RadButton_ARButton _:-ms-fullscreen, :root .RadButton_ARButton .rbSplitPartRight {
margin: -0.35714em -0.85714em -0.28571em 0.35714em; }
.RadButton_ARButton .rbSplitPartLeft {
margin: -0.35714em 0.35714em -0.21429em -0.85714em;
margin: -0.35714em 0.35714em -0.21429em -0.85714em\9; }
.RadButton_ARButton _:-ms-fullscreen, :root .RadButton_ARButton .rbSplitPartLeft {
margin: -0.35714em 0.35714em -0.28571em -0.85714em; }
.RadButton_ARButton .rbSplitIcon {
margin: 0.35714em 0em 0em 0.28571em;
margin: 0.28571em 0 0 0.07143em\9; }
.RadButton_ARButton _:-ms-fullscreen, :root .RadButton_ARButton .rbSplitIcon {
margin: 0.28571em 0em 0em 0.07143em; }
.RadButton_ARButton .rbSplitPartRight.rbHovered {
border-left-color: #c2c2c2; }
.RadButton_ARButton .rbSplitPartRight.rbSelected {
border-left-color: #c2c2c2; }
.RadButton_ARButton .rbSplitPartLeft.rbHovered {
border-right-color: #c2c2c2; }
.RadButton_ARButton .rbSplitPartLeft.rbSelected {
border-right-color: #c2c2c2; }
.RadButton_ARButton.rbPrimaryButton {
background-color: #428bca;
color: #ffffff;
border-color: #357ebd; }
.RadButton_ARButton.rbPrimaryButton.rbHovered, .RadButton_ARButton.rbPrimaryButton.rbFocused {
background-color: #3071a9;
color: #ffffff;
border-color: #285e8e;
box-shadow: none; }
.RadButton_ARButton.rbPrimaryButton.rbFocused {
outline-color: #ffffff; }
.RadButton_ARButton.rbPrimaryButton.rbSelected {
background-color: #3071a9;
color: #ffffff;
border-color: #285e8e;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset; }
.RadButton_ARButton.rbCheckBox, .RadButton_ARButton.rbRadioButton, .RadButton_ARButton.rbToggleButton, .RadButton_ARButton.rbCheckBox .rbIcon, .RadButton_ARButton.rbRadioButton .rbIcon, .RadButton_ARButton.rbToggleButton .rbIcon {
color: #333333; }
.RadButton_ARButton.rbCheckBox.rbHovered, .RadButton_ARButton.rbRadioButton.rbHovered, .RadButton_ARButton.rbToggleButton.rbHovered, .RadButton_ARButton.rbCheckBox.rbHovered .rbIcon, .RadButton_ARButton.rbRadioButton.rbHovered .rbIcon, .RadButton_ARButton.rbToggleButton.rbHovered .rbIcon, .RadButton_ARButton.rbCheckBox.rbSelected .rbIcon, .RadButton_ARButton.rbRadioButton.rbSelected .rbIcon, .RadButton_ARButton.rbToggleButton.rbSelected .rbIcon {
color: #428bca; }
.RadButton_ARButton.rbCheckBox.rbHovered.rbSelected, .RadButton_ARButton.rbRadioButton.rbHovered.rbSelected, .RadButton_ARButton.rbToggleButton.rbSelected.rbSelected, .RadButton_ARButton.rbCheckBox.rbHovered.rbSelected .rbIcon, .RadButton_ARButton.rbRadioButton.rbHovered.rbSelected .rbIcon, .RadButton_ARButton.rbToggleButton.rbSelected.rbSelected .rbIcon {
color: #3071a9; }
.RadButton_ARButton.rbButton.rbPrimaryButton.rbCheckBox, .RadButton_ARButton.rbButton.rbPrimaryButton.rbRadioButton, .RadButton_ARButton.rbButton.rbPrimaryButton.rbToggleButton, .RadButton_ARButton.rbButton.rbPrimaryButton.rbCheckBox .rbIcon, .RadButton_ARButton.rbButton.rbPrimaryButton.rbRadioButton .rbIcon, .RadButton_ARButton.rbButton.rbPrimaryButton.rbToggleButton .rbIcon {
color: #ffffff; }
.RadButton_ARButton.rbButton.rbRtl .rbSplitPart, .RadButton_ARButton.rbButton.rbRtl .rbSplitPart.rbHovered {
border-right-color: #cccccc; }
.RadButton_ARButton.rbButton.rbRtl .rbSplitPart.rbSelected {
border-right-color: #c2c2c2; }
span.RadButton_ARButton.rbButton {
padding: 0.14286em 0.85714em 0.07143em;
padding: 0.21429em 0.85714em 0.14286em \9; }
_:-ms-fullscreen, :root span.RadButton_ARButton.rbButton {
padding: 0.21429em 0.85714em; }
span.RadButton_ARButton.rbButton .rbText {
vertical-align: sub; }
2 Answers, 1 is accepted
There is a knowledge base article dedicated to IE appearing issues: Different appearance or behavior in Internet Explorer on local and production servers.
Please make sure that your IE browser does not load the page in compatibility mode.
Best regards,
Rumen
Progress Telerik
Rank 1
Thanks Rumen.
That was exactly the issue.