Custom skin not working in IE9 when deployed to server

[Shuja]

Hi,

I created a custom skin using the Telerik Skin Builder. The template i used was the built-in Transparent skin.
The custom skin worked fine on my local VS project.

However, I deployed the full project to my server & ran the application but some of the custom settings i created in my skin are simply not working in Internet Explorer 9.When testing locally, i was using IE9 too & it worked fine in that.
I've tried the server-deployed project in Firefox & the custom skin settings work fine.
The main setting which is obvious is that i changed the ragrid selected row color from a dark grey to a very light grey. However, on the server, when using IE9, the color reverts back to the dark grey selection.

I've checked my files are correct & i've registered the custom skin by using the link method:

<link href="General.css" rel="stylesheet" type="text/css" />

 

<link href="App_Themes/Trans/Grid.Trans.css" rel="stylesheet" type="text/css" />

I only have 2 stylesheet files in my page so this 30 stylesheet file limit is no where near reached.

Any ideas why this is happening? 

[Bozhidar]

Hello,

Most probably, some of the styles are not applied and that`s why you could not see the new style old dark grey selection.

Without any code/screenshot provided provided it is hard to tell what is reason for that behavior. To help you further we will need to send us your custom skin and a sample page where the issue is reproduced.

All the best,
Bozhidar
the Telerik team

[Shuja]

Hi Bozhidar,

Thanks for the reponse.My custom skin code is as follows:

/*Telerik RadGrid Transparent Skin*/

/*global*/

.RadGrid_Trans
{
    border:1px solid #a4abb2;
    background:url('Common/TransContent.png');
    color:#3b3b3b;
}

.RadGrid_Trans,
.RadGrid_Trans .rgMasterTable,
.RadGrid_Trans .rgDetailTable,
.RadGrid_Trans .rgGroupPanel table,
.RadGrid_Trans .rgCommandRow table,
.RadGrid_Trans .rgEditForm table,
.RadGrid_Trans .rgPager table,
.GridToolTip_Trans
{
    font:12px/16px Tahoma, Arial, sans-serif;
}

.RadGrid_Trans .rgHeader:first-child,
.RadGrid_Trans th.rgResizeCol:first-child,
.RadGrid_Trans .rgFilterRow>td:first-child,
.RadGrid_Trans .rgRow>td:first-child,
.RadGrid_Trans .rgAltRow>td:first-child
{
    border-left-width:0;
    padding-left:8px;
}

.RadGrid_Trans .rgAdd,
.RadGrid_Trans .rgRefresh,
.RadGrid_Trans .rgEdit,
.RadGrid_Trans .rgDel,
.RadGrid_Trans .rgFilter,
.RadGrid_Trans .rgPagePrev,
.RadGrid_Trans .rgPageNext,
.RadGrid_Trans .rgPageFirst,
.RadGrid_Trans .rgPageLast,
.RadGrid_Trans .rgExpand,
.RadGrid_Trans .rgCollapse,
.RadGrid_Trans .rgSortAsc,
.RadGrid_Trans .rgSortDesc,
.RadGrid_Trans .rgUpdate,
.RadGrid_Trans .rgCancel,
.RadGrid_Trans .rgUngroup,
.RadGrid_Trans .rgExpXLS,
.RadGrid_Trans .rgExpDOC,
.RadGrid_Trans .rgExpPDF,
.RadGrid_Trans .rgExpCSV
{
    background-image:url('Grid/sprite.png');
}

/*header*/
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -7550px;
}

.RadGrid_Trans .rgHeader,
.RadGrid_Trans th.rgResizeCol
{
    border:solid #a4abb2;
    border-width:0 0 1px 1px;
    background:0 -500px repeat-x url('Grid/bgrSprite.png');
}

.RadGrid_Trans th.rgSorted
{
    border-bottom-color:rgba(245,245,245,0.41);
    background:0 -2500px repeat-x url('Grid/bgrSprite.png');
}

.RadGrid_Trans .rgHeader,
.RadGrid_Trans .rgHeader a
{
    color:#000;
}

/*rows*/
.RadGrid_Trans > table > tbody,
.rgDataDiv
{
    background:url('Common/TransContent_22.png');
}

.RadGrid_Trans .rgRow td,
.RadGrid_Trans .rgAltRow td,
.RadGrid_Trans .rgEditRow td,
.RadGrid_Trans .rgFooter td
{
    border-style:solid;
    border-width:0 0 1px 1px;
}

.RadGrid_Trans .rgRow td,
.RadGrid_Trans .rgAltRow td
{
    border-color:#d0d7e5;
}

.RadGrid_Trans .rgRow .rgSorted,
.RadGrid_Trans .rgAltRow .rgSorted
{
    background:url('Common/TransContent_22.png');
}

.RadGrid_Trans .rgSelectedRow .rgSorted,
.RadGrid_Trans .rgActiveRow .rgSorted,
.RadGrid_Trans .rgHoveredRow .rgSorted,
.RadGrid_Trans .rgEditRow .rgSorted
{
    background-color:transparent;
}

.RadGrid_Trans .rgRow a,
.RadGrid_Trans .rgAltRow a,
.RadGrid_Trans .rgEditRow a,
.RadGrid_Trans .rgFooter a,
.RadGrid_Trans .rgEditForm a
{
    color:#3b3b3b;
}

.RadGrid_Trans .rgSelectedRow
{
    background:0 -1500px repeat-x url('Grid/bgrSprite.png');
    color:#fff;
}

.RadGrid_Trans .rgSelectedRow.rgHoveredRow
{
    background:0 -2000px repeat-x url('Grid/bgrSprite.png');
}

*+html .RadGrid_Trans .rgSelectedRow .rgSorted{background-color:#ffcb60}
* html .RadGrid_Trans .rgSelectedRow .rgSorted{background-color:#ffcb60}

.RadGrid_Trans .rgActiveRow,
.RadGrid_Trans .rgHoveredRow
{
    background:0 -1000px repeat-x url('Grid/bgrSprite.png');
}

*+html .RadGrid_Trans .rgActiveRow .rgSorted,
*+html .RadGrid_Trans .rgHoveredRow .rgSorted{background-color:#ecf4ff}
* html .RadGrid_Trans .rgActiveRow .rgSorted,
* html .RadGrid_Trans .rgHoveredRow .rgSorted{background-color:#ecf4ff}

.RadGrid_Trans .rgEditRow
{
    background:#ebebeb;
}

*+html .RadGrid_Trans .rgEditRow .rgSorted{background-color:#ffe5ad}
* html .RadGrid_Trans .rgEditRow .rgSorted{background-color:#ffe5ad}

.RadGrid_Trans .rgSelectedRow td,
.RadGrid_Trans .rgActiveRow td,
.RadGrid_Trans .rgHoveredRow td,
.RadGrid_Trans .rgEditRow td
{
    border-left-width:0;
    padding-left:8px;
}

.RadGrid_Trans .rgActiveRow td,
.RadGrid_Trans .rgHoveredRow td,
.RadGrid_Trans .rgEditRow td
{
    border-bottom-color:#d0d7e5;
}

.RadGrid_Trans .rgDrag
{
    background-image:url('Grid/rgDrag.png');
}

/*footer*/
.RadGrid_Trans > table > tfoot,
.RadGrid_Trans .rgFooterDiv,
.RadGrid_Trans .rgFooter
{
    background:url('Common/TransContent_42.png');
}

.RadGrid_Trans .rgFooter td
{
    border-width:1px 0 0;
    border-color:#848484 #fff #fff;
    padding-left:8px;
}

/*status*/

.RadGrid_Trans .rgPager .rgStatus
{
    border:1px solid;
    border-width:0 1px 0 0;
    border-color:#d0d7e5;
}

.RadGrid_Trans .rgStatus div
{
    background-image:url('Common/loading_small.gif');
}

/*pager*/

.RadGrid_Trans .rgPager
{
    color:#3b3b3b;
}

.RadGrid_Trans td.rgPagerCell
{
}

.RadGrid_Trans .rgPageFirst
{
    margin:0 3px 0 0;
    background-position:0 -550px;
}
.RadGrid_Trans .rgPageFirst:hover
{
    background-position:0 -600px;
}
.RadGrid_Trans .rgPagePrev
{
    margin:0 3px 0 0;
    background-position:0 -700px;
}
.RadGrid_Trans .rgPagePrev:hover
{
    background-position:0 -750px;
}
.RadGrid_Trans .rgPageNext
{
    margin:0 0 0 3px;
    background-position:0 -850px;
}
.RadGrid_Trans .rgPageNext:hover
{
    background-position:0 -900px;
}
.RadGrid_Trans .rgPageLast
{
    margin:0 0 0 3px;
    background-position:0 -1000px;
}
.RadGrid_Trans .rgPageLast:hover
{
    background-position:0 -1050px;
}

.RadGrid_Trans .rgPager .rgPagerButton
{
    border-color:#a4abb2;
    color:#3b3b3b;
    font:12px/12px Tahoma, Arial, sans-serif;
}

.RadGrid_Trans .rgNumPart a:hover,
.RadGrid_Trans .rgNumPart a:hover span,
.RadGrid_Trans .rgNumPart a.rgCurrentPage,
.RadGrid_Trans .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('Grid/sprite.png');
}

.RadGrid_Trans .rgNumPart a
{
    color:#3b3b3b;
}

.RadGrid_Trans .rgNumPart a:hover
{
    background-position:100% -1250px;
    color: #1e395b;
}

.RadGrid_Trans .rgNumPart a:hover span
{
    background-position:0 -1150px;
}

.RadGrid_Trans .rgNumPart a.rgCurrentPage,
.RadGrid_Trans .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
    color: #fff;
}

.RadGrid_Trans .rgNumPart a.rgCurrentPage span,
.RadGrid_Trans .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
}

/*sorting, reordering*/

.RadGrid_Trans .rgHeader .rgSortAsc
{
    background-position:3px -147px;
    height:10px;
}

.RadGrid_Trans .rgHeader .rgSortDesc
{
    background-position:3px -197px;
    height:10px;
}

.GridReorderTop_Trans,
.GridReorderBottom_Trans
{
    height:12px;
    background:0 0 no-repeat url('Grid/sprite.png');
}

.GridReorderBottom_Trans
{
    background-position:0 -50px;
}

/*filtering*/
.RadGrid_Trans .rgFilterRow td
{
    border-style:solid;
    border-color:#a4abb2;
    border-width:0 0 1px 1px;
}

.RadGrid_Trans .rgFilter
{
    background-position:0 -300px;
}

.RadGrid_Trans .rgFilter:hover
{
    background-position:0 -350px;
}

.RadGrid_Trans .rgFilterActive,
.RadGrid_Trans .rgFilterActive:hover
{
    background-position:0 -400px;
}

.RadGrid_Trans .rgFilterBox
{
    border-color:#9e9e9e #e3e3e3 #e3e3e3 #9e9e9e;
    border-color:rgba(0,0,0,0.38) rgba(204,204,204,0.55) rgba(204,204,204,0.55) rgba(0,0,0,0.38);
    background:url('Common/TransContent_42.png');
    color:#000;
    font:12px Tahoma, Arial, sans-serif;
}

/*filter context menu*/

.RadMenu_Trans .rgHCMClear,
.RadMenu_Trans .rgHCMFilter
{
    border-color:#a7bedb #7d98bd #a3bad8;
    background:#e8f1fc center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
    color:#00156e;
    font-family:Tahoma, Arial, sans-serif;
}

.RadMenu_Trans .rgHCMClear:hover,
.RadMenu_Trans .rgHCMFilter:hover
{
    border-color:#d8ca95 #b9a073 #c6ba9d;
    background-position:center -67px;
    background-color:#ffe18a;
    color:#000;
}

/*context menu*/

.GridContextMenu_Trans .rmLeftImage
{
    background-image:url('Common/contextMenu.gif');
}

.GridContextMenu_Trans .rgHCMSortAsc .rmLeftImage
{
    background-position:0 0;
}

.GridContextMenu_Trans .rgHCMSortDesc .rmLeftImage
{
    background-position:0 -40px;
}

.GridContextMenu_Trans .rgHCMUnsort .rmLeftImage
{
    background-position:0 -80px;
}

.GridContextMenu_Trans .rgHCMGroup .rmLeftImage
{
    background-position:0 -120px;
}

.GridContextMenu_Trans .rgHCMUngroup .rmLeftImage
{
    background-position:0 -160px;
}

.GridContextMenu_Trans .rgHCMCols .rmLeftImage
{
    background-position:0 -200px;
}

.GridContextMenu_Trans .rgHCMFilter .rmLeftImage
{
    background-position:0 -240px;
}

.GridContextMenu_Trans .rgHCMUnfilter .rmLeftImage
{
    background-position:0 -280px;
}

/*grouping*/

.RadGrid_Trans .rgGroupPanel
{
    border:0 solid #a4abb2;
    border-bottom-width:1px;
    background:repeat-x url('Grid/bgrSprite.png');
}

.RadGrid_Trans .rgGroupPanel td
{
    border:0;
    padding:3px 4px;
    vertical-align:middle;
}

.RadGrid_Trans .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_Trans .rgGroupPanel .rgSortAsc
{
    background-position:4px -144px;
}

.RadGrid_Trans .rgGroupPanel .rgSortDesc
{
    background-position:4px -194px;
}

.RadGrid_Trans .rgUngroup
{
    background-position:0 -7500px;
}

.RadGrid_Trans .rgGroupItem
{
    border:1px solid #a4abb2;
    color:#3b3b3b;
}

.RadGrid_Trans .rgGroupHeader
{
    font-size:1.1em;
    line-height:21px;
    color:#3b3b3b;
}

.RadGrid_Trans .rgGroupHeader td
{
    border-bottom:1px solid #dadcdd;
    padding-left:8px;
}

.RadGrid_Trans td.rgGroupCol,
.RadGrid_Trans td.rgExpandCol
{
    border-color:#dbdfe4;
}

.RadGrid_Trans .rgGroupHeader .rgExpand
{
    background-position:5px -495px;
}

.RadGrid_Trans .rgGroupHeader .rgCollapse
{
    background-position:3px -93px;
}

/*editing*/

.RadGrid_Trans .rgEditForm
{
    border-bottom:1px solid #a4abb2;
}

.RadGrid_Trans .rgUpdate
{
    background-position:0 -1800px;
}

.RadGrid_Trans .rgCancel
{
    background-position:0 -1850px;
}

/*hierarchy*/

.RadGrid_Trans .rgDetailTable
{
    border-color:#688caf;
}

.RadGrid_Trans .rgExpand
{
    background-position:5px -496px;
}

.RadGrid_Trans .rgCollapse
{
    background-position:3px -94px;
}

/*command row*/

.RadGrid_Trans .rgCommandRow
{
    background:url('Grid/bgrSprite.png');
    color:#333;
}

.RadGrid_Trans .rgCommandCell
{
    border:0;
    padding:0;
}

.RadGrid_Trans thead .rgCommandCell
{
    border-bottom:1px solid #a4abb2;
}

.RadGrid_Trans .rgCommandTable td
{
    border:0;
    padding:2px 7px;
}

.RadGrid_Trans .rgCommandRow a
{
    color:#242424;
    text-decoration:none;
}

.RadGrid_Trans .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}

.RadGrid_Trans .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}

.RadGrid_Trans .rgEdit
{
    background-position:0 -1700px;
}

.RadGrid_Trans .rgDel
{
    background-position:0 -1750px;
}

.RadGrid_Trans .rgExpXLS,
.RadGrid_Trans .rgExpDOC,
.RadGrid_Trans .rgExpPDF,
.RadGrid_Trans .rgExpCSV
{
    background-image:url('Common/export.gif');
}

.RadGrid_Trans .rgExpXLS
{
    background-position:0 0;
}
.RadGrid_Trans .rgExpDOC
{
    background-position:0 -50px;
}
.RadGrid_Trans .rgExpPDF
{
    background-position:0 -100px;
}
.RadGrid_Trans .rgExpCSV
{
    background-position:0 -150px;
}

/*multirow select*/

.GridRowSelector_Trans
{
    background:#00156e;
}

/*row drag n drop*/

.GridItemDropIndicator_Trans
{
    border-top:1px dashed #00156e;
}

/*tooltip*/

.GridToolTip_Trans
{
    border:1px solid #6187b8;
    padding:3px;
    background:#d7e3f2;
    color:#333;
}

/*rtl*/

.RadGridRTL_Trans .rgHeader:first-child,
.RadGridRTL_Trans th.rgResizeCol:first-child,
.RadGridRTL_Trans .rgFilterRow>td:first-child,
.RadGridRTL_Trans .rgRow>td:first-child,
.RadGridRTL_Trans .rgAltRow>td:first-child
{
    border-left-width:1px;
    padding-left:7px;
}

.RadGridRTL_Trans .rgPageFirst
{
    background-position:0 -1000px;
}
.RadGridRTL_Trans .rgPageFirst:hover
{
    background-position:0 -1050px;
}
.RadGridRTL_Trans .rgPagePrev
{
    margin:0 0 0 3px;
    background-position:0 -850px;
}
.RadGridRTL_Trans .rgPagePrev:hover
{
    background-position:0 -900px;
}
.RadGridRTL_Trans .rgPageNext
{
    margin:0 3px 0 0;
    background-position:0 -700px;
}
.RadGridRTL_Trans .rgPageNext:hover
{
    background-position:0 -750px;
}
.RadGridRTL_Trans .rgPageLast
{
    background-position:0 -550px;
}
.RadGridRTL_Trans .rgPageLast:hover
{
    background-position:0 -600px;
}

.RadGridRTL_Trans .rgGroupHeader .rgExpand
{
    background-position:-20px -495px;
}

.RadGridRTL_Trans .rgExpand
{
    background-position:-20px -496px;
}

.RadGridRTL_Trans .rgGroupHeader .rgCollapse
{
    background-position:-20px -93px;
}









 div.RadGrid_Trans .rgRow td {

    color: rgb(74, 153, 255);

}

 div.RadGrid_Trans .rgSelectedRow td {

    background-color: rgb(238, 238, 238);

    color: rgb(74, 153, 255);

}

 div.RadGrid_Trans .rgRow {

    color: rgb(74, 153, 255);

}

 div.RadGrid_Trans tr.rgSelectedRow {

    color: rgb(74, 153, 255);

}

 div.RadGrid_Trans .rgAltRow td {

    color: rgb(74, 153, 255);

}

 div.RadGrid_Trans .rgAltRow {

    color: rgb(74, 153, 255);

}


 div.RadGrid_Trans .rgCommandRow {

    line-height: 10px;

    font-size: 10px;

}

 div.RadGrid_Trans .rgCommandCell {

    line-height: 10px;

    font-size: 10px;

}

 div.RadGrid_Trans .rgRow td {

    border-bottom: 1px solid rgb(219, 223, 228);

    border-left: 1px solid rgb(219, 223, 228);

}

 div.RadGrid_Trans .rgSelectedRow td {

    border-left: 1px solid rgb(219, 223, 228);

    border-bottom-style: solid;

    border-bottom-width: 1px;

}

 div.RadGrid_Trans .rgActiveRow td {

    border-bottom-style: solid;

    border-bottom-width: 1px;

}

 div.RadGrid_Trans .rgHoveredRow td {

    border-bottom-style: solid;

    border-bottom-width: 1px;

}

 div.RadGrid_Trans .rgRow .rgSorted {

    border-bottom-style: solid;

    border-bottom-width: 1px;

}

 div.RadGrid_Trans .rgAltRow td {

    border-left: 1px solid rgb(219, 223, 228);

    border-bottom: 1px solid rgb(219, 223, 228);

}

 div.RadGrid_Trans .rgAltRow .rgSorted {

    border-bottom: 1px solid rgb(219, 223, 228);

}

 div.RadGrid_Trans .rgFooter td {

    font-size: 10px;

    line-height: 10px;

}

 div.RadGrid_Trans .rgFooter {

    font-size: 10px;

    line-height: 10px;

}

 div.RadGrid_Trans .rgPager {

    font-size: 10px;

    line-height: 10px;

}

 div.RadGrid_Trans .rgPager .rgPagerCell {

    font-size: 10px;

    line-height: 10px;

}




 div.RadGrid_Trans .rgSelectedRow td {

    background-color: rgb(238, 238, 238);

}

I've also attached 2 screenshot files. 1 showing the correct selected row colour in the RadGrid & 1 showing the incorrect colour.
Please can you help with this issue as it is really messing me up now. As you can see from the screenshots, i've designed my whole interface on the light colours but this dark highlight is a real eye sore & i can't fix it!

Thanks for your help.

Shuja

[Shuja]

The additional strange thing that i've noticed is that if i go back to the Visual Style Builder & import my skin into the tool, the colours appear correct across the slected row EXCEPT for one single cell background colour, which appears with the dark grey colour (see attached image).If i update the selected row colour it will change to the light grey colour on screen but when i save & download the skin & try to re-import it, it then appears with the same cell having a dark backgroud colour. Seems like a glitch in the VSB tool. Surely, it should save the skin file as it appears in the view & so should be the same when you import it again?

Shuja

[Galin]

Hello Shuja,

I have modified the styles and you can find them in the attached CSS file.

I hope this helps.

Greetings,
Galin
the Telerik team

[Shuja]

Hi Galin,

Thanks for you help & efforts.
However, i'm not sure what you have modified or corrected in the skin file you sent.

For my original issue, your file is still showing the dark grey default background color for selected row. And for the 2nd issue i noticed, the single dark grey cell is still appearing in VSB after i import the skin with your file included.

My issue still remains, where, having changed the selected row background color in VSB, the actual background color that appears in my grid is the default dark grey in some versions of IE. On my local machine it works fine & shows up as a light grey.
This may be an issue across browser versions & IE's compatibility view but i thought the Telerik controls could (and should be able to) handle the different browser versions & display the correct colours in the skin.

If it is easier to do, then i could use the built-in skin "Transparent" but i need help in overriding the default selected row background color, as it is hideous. So could anyone assist me in overriding the default selected row color so i can change it from a nasty dark grey to a light grey?

Reagrds,

Shuja 

[Galin]

Hi Shuja,

It is more easier the override an internal existed skin, than creating a new one. For more information please refer to this blog post.

Example for selected row

div.RadGrid_Transparent .rgSelectedRow
{
    background: #eeeeee;
    color: #4a99ff;
}

Please give a try and let me know how it goes.


Kind regards,
Galin
the Telerik team