Different FieldHeaderStyle DetailsView for edit vs readonly mode

Question

I'm using an ASP DetailsView and would like the item header to be different depending on what mode the DetailsView is in.

I have two images - each one is 500px wide and 30px high. The right 300px is white whereas the left 200px is green or gray, depending on what mode the form will be in (gray for read-only, green for edit). I want the colored area to be the background of the field headings and the white part of the image to be behind the actual bound data.

Using a skin and some simple CSS, this works perfectly for Firefox (version 21.0):

<asp:DetailsView SkinID="DetailsViewSkin" runat="server" CssClass="DetailsView"
  RowStyle-CssClass="DetailsViewRow"
  EditRowStyle-CssClass="DetailsViewRowEdit"
  FieldHeaderStyle-CssClass="DetailsViewHeader"/>

.DetailsView
{
    width: 500px;
}
.DetailsViewRow
{
    background: url('../Images/KL/tableRowGrayjpg') no-repeat #fff;
}
.DetailsViewHeader
{
    width: 200px;
    height:30px;
}
.DetailsViewRowEdit
{
    background: url('../Images/tableRowGreen.jpg') no-repeat #fff;
}

The colored area appears behind the headings and the rest overlays the white part of the image. However, for IE (version 10) and Chrome (version 26.0.1410.64), the background image is appearing in both the <td> for the heading and the <td> for the values.

Anyone know if this is possible or some cross-browser trick? Thanks!

EDIT

Here is the html code that is being generated (for a little more clarity).

<table id="dvPerson" class="DetailsView" cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
  <tbody>
    <tr class="DetailsViewRow">  <!-- DetailsViewRowEdit, when in edit mode -->
      <td class="DetailsViewHeader"></td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Firefox only applies DetailsViewRow (the css with the image) to the <tr> element so the <td>'s are left as is, but Chrome and IE apply it to each individual <td> element, so that each column has the background image.

Answer 1

I think you can solve this differentiating the header row <th> and <td> for the data rows.

tr.DetailsViewRow
{
    background: url('../Images/KL/tableRowGrayjpg') no-repeat #fff;
}

tr.DetailsViewRowEdit
{
    background: url('../Images/tableRowGreen.jpg') no-repeat #fff;
}

td.DetailsViewHeader
{
   width: 200px;
   height:30px;
   background: none;
}

Answer 2

Got it! @Leniel helped me get in the right direction. Based on the html that was being generated (seen below, for brevity), I had to do a little more manual css work:

Generated code:

<table id="dvPerson" class="DetailsView" cellspacing="0" border="1" rules="all">
  <tbody>
    <tr class="DetailsViewRow">  <!-- DetailsViewRowEdit, when in edit mode -->
      <td class="DetailsViewHeader"></td>
      <td> … </td>
    </tr>
  </tbody>
</table>

resulting css (works on Firefix, Chrome, and IE)

.DetailsView
{
    width: 500px;
}
.DetailsViewHeader
{
    width: 170px;
    height:25px;
}
tr.DetailsViewRow td.DetailsViewHeader
{
    background: url('../Images/KL/tableRowGray.jpg') no-repeat #fff;
}
tr.DetailsViewRowEdit td.DetailsViewHeader
{
    background: url('../Images/KL/tableRowGreen.jpg') no-repeat #fff;
}