Grid First Row Flicker with Custom Skin IN IE6 on lower resolution

[Imran Javed Zia]

Hi,
We have Customized the Windows7 Skin according to our requirement and we are facing issue that Grid Size is cannged and we face flickering issue when user hover the first row in the grid with following conditions:

Browser: IE6 Only(Internet Explorer 6) and fine with IE8 and FF
Resolution:  1024x768 or lower
Telerick Build: 2010.1.415.35

For testing purposes, i renamed Windows7 skin proved by telerick to GridSkin, interesting thing is same xcode works fine with embedded skins and have no flickering but when we use custom skin then we face destcribed UI issue.
Can you help use find the fix the issue.
Thanks

<form id="form1" runat="server">

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%" Height="100%" BackColor="Green">
        <telerik:RadPane ID="RadPane1" runat="server" Height="10%" Scrolling="None" >
            <asp:Button ID="btnLoad" runat="server" Text="Load" OnClick="btnLoad_Click" />
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="90%" Scrolling="None">
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
                EnableEmbeddedSkins="False" Skin="GridSkin" EnableViewState="true"
                PageSize="50" AllowPaging="true" AllowSorting="true" HorizontalAlign="Left"
                GridLines="None" Width="100%" Height="100%" AllowMultiRowSelection="true"
                >
                <HeaderContextMenu EnableEmbeddedSkins="False" Skin="Grid">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </HeaderContextMenu>
                <MasterTableView
                    Width="100%" CanRetrieveAllData="False" CellPadding="0" EnableTheming="False"
                    GridLines="None" GroupsDefaultExpanded="False" HorizontalAlign="Left" TableLayout="Fixed"
                    DataKeyNames="ID" ClientDataKeyNames="ID"
                    HeaderStyle-HorizontalAlign="Left" AllowMultiColumnSorting="false"
                    AllowNaturalSort="true" AllowCustomSorting="false" ShowHeadersWhenNoRecords="true">
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="A1" UniqueName="A1" DataField="A1">
                            <HeaderStyle Width="100px" Wrap="false" />
                            <ItemStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="A2" UniqueName="A2" DataField="A2">
                            <HeaderStyle Width="100px" Wrap="false" />
                            <ItemStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="A3" UniqueName="A3" DataField="A3">
                            <HeaderStyle Width="100px" Wrap="false" />
                            <ItemStyle Width="100px" />
                        </telerik:GridBoundColumn>

                        <telerik:GridBoundColumn HeaderText="B1" UniqueName="B1" DataField="B1">
                            <HeaderStyle Width="200px" Wrap="false" />
                            <ItemStyle Width="200px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="B2" UniqueName="B2" DataField="B2">
                            <HeaderStyle Width="200px" Wrap="false" />
                            <ItemStyle Width="200px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="B3" UniqueName="B3" DataField="B3">
                            <HeaderStyle Width="200px" Wrap="false" />
                            <ItemStyle Width="200px" />
                        </telerik:GridBoundColumn>

                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" Display="false" >
                            <HeaderStyle Width="0px" Wrap="false" />
                            <ItemStyle Width="0px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="C1" HeaderText="C1" UniqueName="C1" Display="False" >
                            <HeaderStyle Width="0px" Wrap="false" />
                            <ItemStyle Width="0px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="C2" HeaderText="C2" UniqueName="C2" Display="False" >
                            <HeaderStyle Width="0px" Wrap="false" />
                            <ItemStyle Width="0px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="C3" HeaderText="C3" UniqueName="C3" Display="False" >
                            <HeaderStyle Width="0px" Wrap="false" />
                            <ItemStyle Width="0px" />
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="false" EnableRowHoverStyle="true">
                    <Selecting AllowRowSelect="True" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="100%" FrozenColumnsCount="1" />
                    <ClientEvents />
                    <Resizing AllowColumnResize="true" />
                </ClientSettings>
                <SortingSettings EnableSkinSortStyles="false" />
                <FilterMenu EnableEmbeddedSkins="False" Skin="Grid">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </FilterMenu>
                <PagerStyle AlwaysVisible="true" Height="25px" Width="100%" Mode="NumericPages" />
            </telerik:RadGrid>

        </telerik:RadPane>
    </telerik:RadSplitter>

</form>

/*Telerik RadGrid Windows7 Skin*/

/*global*/

.RadGrid_GridSkin
{
    border:1px solid #a5b3c5;
    background:#fcfcfc;
    color:#000;
}

.RadGrid_GridSkin,
.RadGrid_GridSkin .rgMasterTable,
.RadGrid_GridSkin .rgDetailTable,
.RadGrid_GridSkin .rgGroupPanel table,
.RadGrid_GridSkin .rgCommandRow table,
.RadGrid_GridSkin .rgEditForm table,
.RadGrid_GridSkin .rgPager table,
.GridToolTip_GridSkin
{
    font:12px/16px "segoe ui",arial,sans-serif;
}

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

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

/*header*/

.RadGrid_GridSkin .rgHeaderDiv
{
    background:#f1f5fb;
}

.RadGrid_GridSkin .rgHeader,
.RadGrid_GridSkin th.rgResizeCol
{
    border:1px solid;
    border-color:#f6f9fb #fff #c2cedb #e1eaf3;
    border-top:0;
    background:#f1f5fb;
}

.RadGrid_GridSkin th.rgSorted
{
    background:0 -2600px repeat-x #dde8f7 url('Images/Grid/sprite.gif');
}

.RadGrid_GridSkin .rgHeader,
.RadGrid_GridSkin .rgHeader a
{
    color:#4c607a;
}

/*rows*/

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

.RadGrid_GridSkin .rgRow
{
    background-color:#ebeff3;
}

.RadGrid_GridSkin .rgRow td
{
    border-color:#ebeff3;
}

.RadGrid_GridSkin .rgAltRow td
{
    border-color:#fff;
}

.RadGrid_GridSkin .rgRow .rgSorted,
.RadGrid_GridSkin .rgAltRow .rgSorted
{
    background-color:#e5ecf5;
    border-color:#e5ecf5;
}

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

.RadGrid_GridSkin .rgRow a,
.RadGrid_GridSkin .rgAltRow a,
.RadGrid_GridSkin .rgEditRow a,
.RadGrid_GridSkin .rgFooter a,
.RadGrid_GridSkin .rgEditForm a
{
    color:#1e3287;
}

.RadGrid_GridSkin .rgSelectedRow
{
    background:#d7e8fe 0 -3900px repeat-x url('Images/Grid/sprite.gif');
}
*+html .RadGrid_GridSkin .rgSelectedRow .rgSorted{background-color:#d7e8fe}
* html .RadGrid_GridSkin .rgSelectedRow .rgSorted{background-color:#d7e8fe}

.RadGrid_GridSkin .rgActiveRow,
.RadGrid_GridSkin .rgHoveredRow
{
    background:#e7eef6 0 -2900px repeat-x url('Images/Grid/sprite.gif');
}
*+html .RadGrid_GridSkin .rgActiveRow .rgSorted,
*+html .RadGrid_GridSkin .rgHoveredRow .rgSorted{background-color:#e7eef6}
* html .RadGrid_GridSkin .rgActiveRow .rgSorted,
* html .RadGrid_GridSkin .rgHoveredRow .rgSorted{background-color:#e7eef6}

.RadGrid_GridSkin .rgEditRow
{
    background:#e6f0fd 0 -4900px repeat-x url('Images/Grid/sprite.gif');
}
*+html .RadGrid_GridSkin .rgEditRow .rgSorted{background-color:#e6f0fd}
* html .RadGrid_GridSkin .rgEditRow .rgSorted{background-color:#e6f0fd}

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

.RadGrid_GridSkin .rgSelectedRow td,
.RadGrid_GridSkin .rgSelectedRow .rgSorted
{
    border-bottom-color:#8daed5;
}

.RadGrid_GridSkin .rgActiveRow td,
.RadGrid_GridSkin .rgActiveRow .rgSorted,
.RadGrid_GridSkin .rgHoveredRow td,
.RadGrid_GridSkin .rgHoveredRow .rgSorted
{
    border-bottom-color:#a8d8eb;
}

.RadGrid_GridSkin .rgEditRow td,
.RadGrid_GridSkin .rgEditRow .rgSorted
{
    border-bottom-color:#8daed5;
}

/*footer*/

.RadGrid_GridSkin .rgFooterDiv,
.RadGrid_GridSkin .rgFooter
{
    background:#e2eaf4;
}

.RadGrid_GridSkin .rgFooter td
{
    border-top-width:1px;
    border-color:#e2eaf4;
}

/*status*/

.RadGrid_GridSkin .rgPager .rgStatus
{
    border:1px solid;
    border-color:#fcfcfc #c2cedb #f1f5fb #f1f5fb;
    border-left:0;
}

.RadGrid_GridSkin .rgStatus div
{
    background-image:url('Images/Grid/loading_small.gif');
}

/*pager*/

.RadGrid_GridSkin .rgPager
{
    background:#f1f5fb 0 -5900px repeat-x url('Images/Grid/sprite.gif');
}

.RadGrid_GridSkin td.rgPagerCell
{
    border:1px solid;
    border-color:#fcfcfc #fff #f1f5fb;
    border-right:0;
}

.RadGrid_GridSkin .rgInfoPart
{
    color:#5a6779;
}

.RadGrid_GridSkin .rgInfoPart strong
{
    color:#1e395b;
}

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

.RadGrid_GridSkin .rgPager .rgPagerButton
{
    border-color:#c2cedb;
    background:#dde8f6 repeat-x 0 -1550px url('Images/Grid/sprite.gif');
    color:#1e395b;
    font:12px/12px "segoe ui",arial,sans-serif;
}

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

.RadGrid_GridSkin .rgNumPart a
{
    color:#1e395b;
}

.RadGrid_GridSkin .rgNumPart a:hover
{
    background-position:100% -1250px;
    color:#4c607a;
}

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

.RadGrid_GridSkin .rgNumPart a.rgCurrentPage,
.RadGrid_GridSkin .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
    color:#4c607a;
}

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

/*sorting, reordering*/

.RadGrid_GridSkin .rgHeader .rgSortAsc
{
    background-position:3px -248px;
    height:10px;
}

.RadGrid_GridSkin .rgHeader .rgSortDesc
{
    background-position:3px -198px;
    height:10px;
}

.GridReorderTop_GridSkin,
.GridReorderBottom_GridSkin
{
    height:11px;
    background:0 0 no-repeat url('Images/Grid/sprite.gif');
}

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

/*filtering*/

.RadGrid_GridSkin .rgFilterRow
{
    background:#f1f5fb;
}

.RadGrid_GridSkin .rgFilterRow td
{
    border-left:1px solid #f1f5fb;
    border-right:1px solid #f1f5fb;
}

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

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

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

.RadGrid_GridSkin .rgFilterBox
{
    border-color:#b8cbde;
    font:12px "segoe ui",arial,sans-serif;
    color:#000;
}

/*filter context menu*/

.RadMenu_GridSkin .rgHCMClear,
.RadMenu_GridSkin .rgHCMFilter
{
    border-color:#c2cedb;
    background:#dde8f6 center -23px repeat-x url('Images/Grid/ButtonSprites.gif');
    color:#1e395b;
    font-family:"segoe ui",arial,sans-serif;
}

.RadMenu_GridSkin .rgHCMClear:hover,
.RadMenu_GridSkin .rgHCMFilter:hover
{
    border-color:#c2dbfb;
    background-position:center -67px;
    background-color:#e7edf5;
}

/*grouping*/

.RadGrid_GridSkin .rgGroupPanel
{
    border:1px solid;
    border-color:#f2f5fa #f6f9fb #f6f9fb;
    background:#eef3f8 0 -1900px repeat-x url('Images/Grid/sprite.gif');
}

.RadGrid_GridSkin .rgGroupPanel td
{
    border:0;
    padding:0;
}

.RadGrid_GridSkin .rgGroupPanel td td
{
    padding:2px 3px 1px;
}

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

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

.RadGrid_GridSkin .rgGroupPanel .rgSortDesc
{
    background-position:4px -94px;
}

.RadGrid_GridSkin .rgUngroup
{
    background-position:0 -7200px;
}

.RadGrid_GridSkin .rgGroupItem
{
    border:1px solid #9bc9ff;
    background:#dde8f6 0 -7000px repeat-x url('Images/Grid/sprite.gif');
}

.RadGrid_GridSkin .rgGroupHeader
{
    background:0 -6489px repeat-x url('Images/Grid/sprite.gif');
    font-size:1.1em;
    line-height:21px;
    color:#1e3287;
}

.RadGrid_GridSkin .rgGroupHeader td
{
    padding:0 8px;
}

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

.RadGrid_GridSkin .rgCollapse
{
    background-position:3px -444px;
}

.RadGrid_GridSkin .rgGroupHeader .rgExpand,
.RadGrid_GridSkin .rgGroupHeader .rgCollapse
{
    background-color:#fcfcfc;
}

.RadGrid_GridSkin .rgGroupHeader td p
{
    background:#fcfcfc;
}

.RadGrid_GridSkin .rgGroupHeader td div div
{
    background:#fcfcfc;
}

/*editing*/

.RadGrid_GridSkin .rgEditForm
{
    border-bottom:1px solid #666;
}

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

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

/*hierarchy*/

.RadGrid_GridSkin .rgDetailTable
{
    border-color:#a5b3c5;
}

/*command row*/

.RadGrid_GridSkin .rgCommandRow
{
    background:#e4edf8 0 -2099px repeat-x url('Images/Grid/sprite.gif');
    color:#1e395b;
}

.RadGrid_GridSkin .rgCommandCell
{
    border:1px solid;
    border-color:#fbfdfe #f1f7fc #ebf3fb;
    padding:0;
}

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

.RadGrid_GridSkin .rgCommandTable
{
    border:0;
}

.RadGrid_GridSkin .rgCommandRow a
{
    color:#1e395b;
    text-decoration:none;
}

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

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

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

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

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

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

/*multirow select*/

.GridRowSelector_GridSkin
{
    background:#039;
}

/*row drag n drop*/

.GridItemDropIndicator_GridSkin
{
    border-top:1px dashed #039;
}

/*tooltip*/

.GridToolTip_GridSkin
{
    border:1px solid #a0afc3;
    padding:3px;
    background:#eef4fb;
    color:#4c607a;
}

/*rtl*/

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

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

[Dimo]

Hello Imran,

Please increase the specificity of the following CSS selectors by adding a "div" tag at the front:

div.RadGrid_GridSkin .rgSelectedRow td,
div.RadGrid_GridSkin .rgActiveRow td,
div.RadGrid_GridSkin .rgHoveredRow td,
div.RadGrid_GridSkin .rgEditRow td
{
    border-left:0;
    border-right:0;
    padding-left:8px;
    padding-right:8px;
}

Best wishes,
Dimo
the Telerik team