asp.net - Different FieldHeaderStyle DetailsView for edit vs readonly mode -
i'm using asp detailsview
, item header different depending on mode detailsview
in.
i have 2 images - each 1 500px wide , 30px high. right 300px white whereas left 200px green or gray, depending on mode form in (gray read-only, green edit). want colored area background of field headings , white part of image behind actual bound data.
using skin , simple css, works 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 headings , rest overlays white part of image. however, ie (version 10) , chrome (version 26.0.1410.64), background image appearing in both <td>
heading , <td>
values.
anyone know if possible or cross-browser trick? thanks!
edit
here html code being generated (for 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 applies detailsviewrow
(the css image) <tr>
element <td>
's left is, chrome , ie apply each individual <td>
element, each column has background image.
i think can solve differentiating header row <th>
, <td>
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; }
Comments
Post a Comment