Group Header first cell setting border width 0px

[Kevin]

I have a grid that has a group header (our clients call it a "Page", which is seperate from the concept of grid page).  For some reason, the first cell of the group header gets rendered with a style of "border-right-width: 0px;" (the second <td> from the Page Source shown below):

<tbody>
    <tr class="rgGroupHeader" style="font-weight:normal;font-style:normal;text-decoration:none;">
        <td class="rgGroupCol"><input type=...(snipped) /></td>
            <td style="border-right:0;">
                <div style="width:100%;height:100%;white-space:nowrap;position:relative;">
                <div style="position:absolute;">
                <div style="position:relative;">Page Number: 1</div></div></div></td>
        (rest of column header td's snipped)
    </tr>

This results in the whole grid alignment being off by one pixel from the column headers.  I can't explain what is causing this.  I've tried setting the BorderWidth attribute of the GroupHeaderItemStyle but that renders as border attributes on the <tr> element, and the inner <td> still overrides it.

We're on IE8, using with Telerik Q1 2010.  CSS and ASP.NET code below.  I've also attached a screen snippet showing the issue (I have IE's Developer Tools set to outline table cells, to hightlight the issue).

/*Telerik RadGrid WebBlue Skin*/

/*global*/

.RadGrid_WebBlue
{
    border:1px solid #768ca5;
    background:#fff;
    color:#000;
}

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

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

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

/*header*/

.RadGrid_WebBlue .rgHeaderDiv
{
    background:#dae2e8 0 -7050px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -6550px;
}

.RadGrid_WebBlue .rgHeader,
.RadGrid_WebBlue th.rgResizeCol
{
    border:1px solid;
    border-color:#98acbf #455f77 #3d556c #728ba1;
    border-top:0;
    background:0 -2300px repeat-x #718ca1 url('Grid/sprite.gif');
}

.RadGrid_WebBlue th.rgSorted
{
    border-color:#7c93a8 #39556e #334d65 #758ea4;
    background-color:#5c7990;
    background-position:0 -2600px;
}

.RadGrid_WebBlue .rgHeader,
.RadGrid_WebBlue .rgHeader a
{
    color:#fff;
}

/*rows*/

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

.RadGrid_WebBlue .rgRow td
{
    border-right-color: #8d9092;
    border-left-color: transparent;
    border-top-color: #8d9092;
    border-bottom-color: #8d9092;
}

.RadGrid_WebBlue .rgAltRow
{
    background:#dae2e8;
}

.RadGrid_WebBlue .rgAltRow td
{
    border-right-color: #8d9092;
    border-left-color: transparent;
    border-top-color: #8d9092;
    border-bottom-color: #8d9092;
}

.RadGrid_WebBlue .rgRow .rgSorted
{
    border-bottom-color:#f0f0f0;
    background-color:#f0f0f0;
    border-right-color: #8d9092;
    border-left-color: transparent;
    border-top-color: #8d9092;
    border-bottom-color: #8d9092;
}

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

.RadGrid_WebBlue .rgRow a,
.RadGrid_WebBlue .rgAltRow a,
.RadGrid_WebBlue .rgEditRow a,
.RadGrid_WebBlue .rgFooter a,
.RadGrid_WebBlue .rgEditForm a
{
    color:#0e3d4f;
}

.RadGrid_WebBlue .rgSelectedRow
{
    background:#ffff99;

}
*+html .RadGrid_WebBlue .rgSelectedRow .rgSorted{background-color:#ffff99}
* html .RadGrid_WebBlue .rgSelectedRow .rgSorted{background-color:#7bbbcf}

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

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

.RadGrid_WebBlue .rgSelectedRow td,
.RadGrid_WebBlue .rgActiveRow td,
.RadGrid_WebBlue .rgHoveredRow td,
.RadGrid_WebBlue .rgEditRow td
{

    border-left:1;
    border-right:1;
    padding-left:7px;
    padding-right:7px;
}

.RadGrid_WebBlue .rgSelectedRow td,
.RadGrid_WebBlue .rgSelectedRow td.rgSorted
{
    border-right-color: #8d9092;
    border-left-color: transparent;
    border-top-color: #8d9092;
    border-bottom-color: #8d9092;
}

.RadGrid_WebBlue .rgActiveRow td,
.RadGrid_WebBlue .rgHoveredRow td,
.RadGrid_WebBlue .rgActiveRow td.rgSorted,
.RadGrid_WebBlue .rgHoveredRow td.rgSorted
{
    border-right-color: #8d9092;
    border-left-color: transparent;
    border-top-color: #8d9092;
    border-bottom-color: #8d9092;
}

.RadGrid_WebBlue .rgEditRow td,
.RadGrid_WebBlue .rgEditRow td.rgSorted
{
    border-right-color: #8d9092;
    border-left-color: transparent;
    border-top-color: #8d9092;
    border-bottom-color: #8d9092;
}

.GridRowError_WebBlue
{
    background-color: red;
}

.GridRowError_WebBlue td
{
    border-right: #90979e 1px solid;
    border-left-color: red;
    border-bottom: #90979e 1px solid;
    border-top-color: red;
}

.GridRowWarning_WebBlue
{
    background-color: #FF7000;
}

.GridRowWarning_WebBlue td
{
    border-right: #90979e 1px solid;
    border-left-color: #ffa07a;
    border-bottom: #90979e 1px solid;
    border-top-color: #ffa07a;
}

/*footer*/

.RadGrid_WebBlue .rgFooterDiv,
.RadGrid_WebBlue .rgFooter
{
    background:#dae2e8;
}

.RadGrid_WebBlue .rgFooter td
{
    border-top-width:1px;
    border-color:#a2b3c7 #dae2e8 #fff #dae2e8;
}

/*status*/

.RadGrid_WebBlue .rgPager .rgStatus
{
    border:1px solid;
    border-color:#a2b3c7 #9cb6c5 #fff #9cb6c5;
    border-left:0;
}

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

/*pager*/

.RadGrid_WebBlue .rgPager
{
    background:#dae2e8;
}

.RadGrid_WebBlue td.rgPagerCell
{
    border:1px solid;
    border-color:#a2b3c7 #fff #fff;
    border-right:0;
}

.RadGrid_WebBlue .rgInfoPart
{
    color:#506175;
}

.RadGrid_WebBlue .rgInfoPart strong
{
    color:#000;
}

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

.RadGrid_WebBlue .rgPager .rgPagerButton
{
    border-color:#4e667e #476077 #425c71;
    background:#d6e1e7 repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#0d202b;
    font:12px/12px "segoe ui",arial,sans-serif;
}

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

.RadGrid_WebBlue .rgNumPart a
{
    color:#000;
}

.RadGrid_WebBlue .rgNumPart a:hover
{
    background-position:100% -1250px;
    color:#0e3d4f;
}

.RadGrid_WebBlue .rgNumPart a:hover span
{
    background-position:0 -1150px;
    cursor:pointer;
}

.RadGrid_WebBlue .rgNumPart a.rgCurrentPage,
.RadGrid_WebBlue .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
    color:#0053a5;
}

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

/*sorting, reordering*/

.RadGrid_WebBlue .rgHeader .rgSortAsc
{
    background-position:3px -247px;
    height:10px;
}

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

.GridReorderTop_WebBlue,
.GridReorderBottom_WebBlue
{
    background:0 0 no-repeat url('Grid/sprite.gif');
}

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

/*filtering*/

.RadGrid_WebBlue .rgFilterRow
{
    background:#dae2e8;
}

.RadGrid_WebBlue .rgFilterRow td
{
    border:1px solid;
    border-top:0;
    border-color:#dae2e8 #dae2e8 #a2b3c7;
}

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

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

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

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

/*filter context menu*/

.RadMenu_WebBlue .rgHCMClear,
.RadMenu_WebBlue .rgHCMFilter
{
    border-color:#4e667e #476078 #425c71;
    background:#d7e2e7 center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
    color:#0d202b;
    font-family:"segoe ui",arial,sans-serif;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}

.RadMenu_WebBlue .rgHCMClear:hover,
.RadMenu_WebBlue .rgHCMFilter:hover
{
    border-color:#5d9fb7;
    background-position:center -67px;
    background-color:#bee3f6;
    color:#0e3d4f;
}

/*grouping*/

.RadGrid_WebBlue .rgGroupPanel
{
    border:0;
    border-bottom:1px solid #3d556c;
    background:#dfeeff;
}

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

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

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

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

.RadGrid_WebBlue .rgUngroup
{
    background-position:0 -6500px;
}

.RadGrid_WebBlue .rgGroupItem
{
    border:1px solid #506175;
    background:#ebf7ff;
    color:#0053a5;
}

.RadGrid_WebBlue .rgGroupHeader
{
    background:#8ea3b9;
    font-size:1.1em;
    line-height:21px;
    color:#fff;
}

.RadGrid_WebBlue .rgGroupHeader td
{
    border-style:solid;
    border-width:0 1px 1px;
    border-color: #8ea3b9;
}

.RadGrid_WebBlue td.rgGroupCol,
.RadGrid_WebBlue td.rgExpandCol
{
    background:#8ea3b9 none;
    border-color:#8ea3b9;
    border-width:0 1px 1px;
}


.RadGrid_WebBlue .rgExpand
{
    background-position:5px -496px;
    border-width:0 1px 1px;
}

.RadGrid_WebBlue .rgCollapse
{
    background-position:3px -444px;
    border-width:0 1px 1px;
}

/*editing*/

.RadGrid_WebBlue .rgEditForm
{
    border-bottom:1px solid #768ca5;
}

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

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

/*hierarchy*/

.RadGrid_WebBlue .rgDetailTable
{
    border-color:#768ca5;
}

/*command row*/

.RadGrid_WebBlue .rgCommandRow
{
    background:#495a70 0 -2099px repeat-x url('Grid/sprite.gif');
    color:#fff;
}

.RadGrid_WebBlue .rgCommandCell
{
    border:1px solid #212f41;
    padding:0;
}

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

.RadGrid_WebBlue .rgCommandTable
{
    border:1px solid;
    border-color:#63758a #3d4b5b #58697d;
}

.RadGrid_WebBlue .rgCommandRow a
{
    color:#fff;
    text-decoration:none;
}

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

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

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

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

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

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

/*multirow select*/

.GridRowSelector_WebBlue
{
    background:#3d556c;
}

/*row drag n drop*/

.GridItemDropIndicator_WebBlue
{
    border-top:1px dashed #3d556c;
}

/*tooltip*/

.GridToolTip_WebBlue
{
    border:1px solid #768ca5;
    padding:3px;
    background:#dae2e8;
    color:#000;
}

/*rtl*/

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

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

<telerik:RadGrid ID="radGridDetails" runat="server" AutoGenerateColumns="False" GridLines="None" Skin="WebBlue" EnableEmbeddedSkins="False" Width="100%" Height="360px"
                ShowStatusBar="True" AllowPaging="True" PageSize="15" ShowFooter="True" AllowMultiRowSelection="True" TabIndex="21">
    <HeaderContextMenu Skin="WebBlue" EnableEmbeddedSkins="False">
        <CollapseAnimation Duration="200" Type="OutQuint" />
    </HeaderContextMenu>
    <MasterTableView Font-Size="Small" ShowGroupFooter="True" GroupLoadMode="Client">
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="PageNumber" HeaderText="Page Number" FieldAlias="PageNumber" />
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="PageNumber" FieldAlias="PageNumber" />
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <Columns>
            <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id" Display="False"/>
            <telerik:GridBoundColumn UniqueName="Col1" HeaderText="Col1" DataField="Col1">
                <ItemStyle HorizontalAlign="Right" />
                <HeaderStyle Width="110px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Col2" HeaderText="Col2" DataField="Col2" DataFormatString="{0:yyyy/MM/dd}" DataType="System.DateTime">
                <ItemStyle HorizontalAlign="Right" />
                <HeaderStyle Width="110px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Col3" HeaderText="Col3" DataField="Col3">
                <ItemStyle HorizontalAlign="Right" />
                <HeaderStyle Width="90px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Amount" Aggregate="Sum" HeaderText="Col4" DataField="Amount" FooterAggregateFormatString="Total: {0:#,0.00}"
                                    FooterStyle-Font-Bold="true" FooterStyle-BackColor="#ffff99" DataFormatString="{0:#,0.00}">
                <ItemStyle HorizontalAlign="Right" />
                <HeaderStyle Width="110px" />
                <FooterStyle HorizontalAlign="Right" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Col5" HeaderText="Col5" DataField="Col5">
                <ItemStyle HorizontalAlign="Left" />
                <HeaderStyle Width="100px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Col6" HeaderText="Col6" DataField="Col6">
                <ItemStyle HorizontalAlign="Left" />
                <HeaderStyle Width="100px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Col7" HeaderText="Col7" DataField="Col7">
                <ItemStyle HorizontalAlign="Left" />
                <HeaderStyle Width="90px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ErrorIndicator" HeaderText="Error Ind" DataField="ErrorIndicator" Display="False"/>
            <telerik:GridBoundColumn UniqueName="Messages" HeaderText="Messages" DataField="WarningMessage">
                <ItemStyle HorizontalAlign="Left" />
                <HeaderStyle Width="220px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="PageNumber" UniqueName="PageNumber" Visible="False"/>
        </Columns>
    </MasterTableView>
    <GroupHeaderItemStyle  Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Wrap="True" />
    <ClientSettings EnablePostBackOnRowClick="True">
        <ClientEvents OnGridCreated="DetailsGridCreated" />
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
    <FilterMenu Skin="WebBlue" EnableEmbeddedSkins="False">
        <CollapseAnimation Duration="200" Type="OutQuint" />
    </FilterMenu>
</telerik:RadGrid>

[Mira]

Hello Kevin,

Based on the supplied information, I am unable to fully understand the problem and what is causing it.

Could you please send us a live URL on which the described issue can be replicated?
Another option is to open a formal support ticket and send us a runnable sample.

I am looking forward to your reply.

All the best,
Mira
the Telerik team

[Kevin]

My client decided that they could live with the 1 pixel offset rather then having me set up a sample solution.  The issue can be closed.  Thanks.