Gap Between Header and 1st row

[Justin]

I have a RadGrid that is not using enabled themes, so I have made my own skin. This Grid looked perfect before I started making changes to that, but the customer wants it to look like previous grids.

So... there is an unexplained gap between the header row and the first data row now in my grid. (screenshot attached)
Can anyone help me figure out why, and how to close that gap?

Thanks in advance!

Here is the ASPX code:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" ShowGroupPanel="false" ShowStatusBar="false" EnableViewState="false" GridLines="Both" ShowFooter="false" EnableEmbeddedSkins="false" SkinID="radgridSkin" OnItemDataBound="RadGrid1_OnDataBound" OnPreRender="RadGrid1_PreRender">
  <MasterTableView EnableColumnsViewState="false" Width="100%" TableLayout="Auto" >
  <Columns>
  <telerik:GridBoundColumn DataField="TaxonName" HeaderText="Taxon" ItemStyle-Wrap="false" HeaderStyle-BorderWidth="0px" >
  </telerik:GridBoundColumn>
  <telerik:GridBoundColumn DataField="StrainNumber" HeaderText="Strain #" ItemStyle-Wrap="false" HeaderStyle-BorderWidth="0px">
  </telerik:GridBoundColumn>
  </Columns>
  </MasterTableView>
<HeaderStyle Wrap="true" BorderStyle="Solid" BorderWidth="1px" BorderColor="SlateGray" />
<ClientSettings>
  <Selecting AllowRowSelect="true" />
  <Scrolling AllowScroll="True" ScrollHeight="500px" FrozenColumnsCount="2" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>

Here is the Skin Code:

<telerik:RadGrid  runat="server" ShowGroupPanel="false" ShowStatusBar="false" SkinId="radgridSkin" ItemStyle-BackColor="GhostWhite" AlternatingItemStyle-BackColor="LightGray" HeaderStyle-BackColor="Transparent" HeaderStyle-Font-Bold="true" AlternatingItemStyle-CssClass="dgRow" ItemStyle-Height="28px" AlternatingItemStyle-Height="28px" ItemStyle-CssClass="dgRow" ItemStyle-BorderColor="LightSlateGray" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px" AlternatingItemStyle-BorderColor="LightSlateGray" AlternatingItemStyle-BorderStyle="Solid"  AlternatingItemStyle-BorderWidth="1px">
</telerik:RadGrid>

Here is the CSS Code:

.dgRow{}
.dgRow td
{
    height: 31px;
    padding: 0px 0px 0px 2px;
    border: solid 1px LightSlateGray;
}
TABLE.dgRow th
{
    padding-left:4px;
    padding-right:4px;
    padding-bottom:4px;
    max-height:60px;
    vertical-align:bottom;
    white-space:nowrap;
    text-align:left;
}

[Dimo]

Hi Justin,

The spacing is probably caused by margin or padding CSS styles in your web page, which are inherited by RadGrid. Please check for margin styles for <table>s and padding styles for <div>s. You can use Firebug for that.

If you need further assistance, please send a full runnable page, which reproduces the problem.

Greetings,
Dimo
the Telerik team