I have a datagrid in my screen display, defined as follows:-
<div style="overflow: auto; width: 380px; height: 300px">
<asp:DataGrid id="ItemsGrid"
BorderWidth="1"
CellPadding="3"
AutoGenerateColumns="true"
runat="server">
<HeaderStyle CssClass="subHeader"></HeaderStyle>
<ItemStyle CssClass="normalText"></ItemStyle >
</asp:DataGrid>
</div>
This is displayed like this:-

Without the HeaderStyle item the grid is displayed as I would expect:-

(although the titles are styled wrongly). The CSS is thus:-
.subHeader
{
clear:both;
float: left;
display: block;
overflow: hidden;
margin: 0;
border: 0;
border-width: 0px;
border-right-style: solid;
font-size: small;
font-family: Verdana;
}
Does anyone know what I am doing wrong here? I have tried the suggestion here but it doesn’t make any difference.
Edit
As requested here is the HTML output, first for the version with the HeaderStyle entry:-
<div style="overflow: auto; width: 380px; height: 300px">
<table cellspacing="0" cellpadding="3" rules="all" border="1" id="ItemsGrid style="border-width:1px;border-style:solid;border-collapse:collapse;">
<tr class="subHeader">
<td>Grade</td><td>Kurznamen</td><td>Discard Length</td>
</tr><tr class="normalText">
<td>13004</td><td>21CRNIMO2-2-2</td><td>23.17</td>
and without:-
<div style="overflow: auto; width: 380px; height: 300px">
<table cellspacing="0" cellpadding="3" rules="all" border="1" id="ItemsGrid" style="border-width:1px;border-style:solid;border-collapse:collapse;">
<tr>
<td>Grade</td><td>Kurznamen</td><td>Discard Length</td>
</tr><tr class="normalText">
<td>13004</td><td>21CRNIMO2-2-2</td><td>23.17</td>
Remove the
clearandfloatrules and you should be good to go.Also, in case you are not faimiliar with CSS, I recommend you to take a look on some sites like this: http://www.csstutorial.net/