Datagrid CssClass being overridden by TD style

Discussion in 'ASP .Net' started by Laurence Neville, Sep 22, 2004.

  1. Since I added a style for TD elements to my style sheet I have been unable
    to control the look of datagrids using the CssClass properties. Maybe there
    is no way round it, but I really need to keep the TD style in place to
    control other elements on the page.

    Is there a way around this?

    Here is the code from my datagrid:

    <ASP:DataGrid EditItemStyle-CssClass="SubNormal"
    FooterStyle-CssClass="SubNormal" HeaderStyle-CssClass="SubNormal"
    ItemStyle-CssClass="SubNormal" id="MyDataGrid1" runat="server"
    CssClass="SubNormal" EnableViewState="True"
    Width="100%" BackColor="#ffffff" BorderColor="black" ShowFooter="false"
    CellPadding="3" CellSpacing="0"
    HeaderStyle-BackColor="#ffcc66" DataKeyField="RowHeading_1"
    AutoGenerateColumns="false" OnEditCommand="MyDataGrid1_Edit"
    OnCancelCommand="MyDataGrid1_Cancel" OnUpdateCommand="MyDataGrid1_Update">

    Here is the code from my CSS file:

    BODY, TD, P, LI, BLOCKQUOTE {
    font-family: verdana,arial,geneva,sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    }

    ..SubNormal
    {
    font-family: verdana,arial,geneva,sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    }

    As you can see, all that I am trying to do is reduce the font in the
    datagrid to 11px rather than the standard 13px
     
    Laurence Neville, Sep 22, 2004
    #1
    1. Advertising

  2. Laurence Neville

    GrantMagic Guest

    You can try using skins

    http://beta.asp.net/quickstart/aspnet/doc/themes.aspx


    "Laurence Neville" <> wrote in message
    news:...
    > Since I added a style for TD elements to my style sheet I have been unable
    > to control the look of datagrids using the CssClass properties. Maybe
    > there is no way round it, but I really need to keep the TD style in place
    > to control other elements on the page.
    >
    > Is there a way around this?
    >
    > Here is the code from my datagrid:
    >
    > <ASP:DataGrid EditItemStyle-CssClass="SubNormal"
    > FooterStyle-CssClass="SubNormal" HeaderStyle-CssClass="SubNormal"
    > ItemStyle-CssClass="SubNormal" id="MyDataGrid1" runat="server"
    > CssClass="SubNormal" EnableViewState="True"
    > Width="100%" BackColor="#ffffff" BorderColor="black" ShowFooter="false"
    > CellPadding="3" CellSpacing="0"
    > HeaderStyle-BackColor="#ffcc66" DataKeyField="RowHeading_1"
    > AutoGenerateColumns="false" OnEditCommand="MyDataGrid1_Edit"
    > OnCancelCommand="MyDataGrid1_Cancel" OnUpdateCommand="MyDataGrid1_Update">
    >
    > Here is the code from my CSS file:
    >
    > BODY, TD, P, LI, BLOCKQUOTE {
    > font-family: verdana,arial,geneva,sans-serif;
    > font-size: 13px;
    > font-weight: normal;
    > color: #333333;
    > }
    >
    > .SubNormal
    > {
    > font-family: verdana,arial,geneva,sans-serif;
    > font-size: 11px;
    > font-weight: normal;
    > color: #333333;
    > }
    >
    > As you can see, all that I am trying to do is reduce the font in the
    > datagrid to 11px rather than the standard 13px
    >
     
    GrantMagic, Sep 22, 2004
    #2
    1. Advertising

  3. The problem is that IIRC the css class for the datagrid is applied to the
    <tr> tags and not the <td>, so your first rule applies directly to the <td>
    and is overriding the .SubNormal style on the <tr>. (Somebody correct me if
    I'm wrong about where datagrid applies css classes.)

    To fix this, you can just make your second rule more specific:
    ..SubNormal TD {
    font-size: 11px;
    }

    Note also that you can take out the other style bits from this rule, since
    they are identical to the first rule and will inherit.
    For more information about rule specificity and the cascade, see
    http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

    HTH

    "Laurence Neville" wrote:

    > Since I added a style for TD elements to my style sheet I have been unable
    > to control the look of datagrids using the CssClass properties. Maybe there
    > is no way round it, but I really need to keep the TD style in place to
    > control other elements on the page.
    >
    > Is there a way around this?
    >
    > Here is the code from my datagrid:
    >
    > <ASP:DataGrid EditItemStyle-CssClass="SubNormal"
    > FooterStyle-CssClass="SubNormal" HeaderStyle-CssClass="SubNormal"
    > ItemStyle-CssClass="SubNormal" id="MyDataGrid1" runat="server"
    > CssClass="SubNormal" EnableViewState="True"
    > Width="100%" BackColor="#ffffff" BorderColor="black" ShowFooter="false"
    > CellPadding="3" CellSpacing="0"
    > HeaderStyle-BackColor="#ffcc66" DataKeyField="RowHeading_1"
    > AutoGenerateColumns="false" OnEditCommand="MyDataGrid1_Edit"
    > OnCancelCommand="MyDataGrid1_Cancel" OnUpdateCommand="MyDataGrid1_Update">
    >
    > Here is the code from my CSS file:
    >
    > BODY, TD, P, LI, BLOCKQUOTE {
    > font-family: verdana,arial,geneva,sans-serif;
    > font-size: 13px;
    > font-weight: normal;
    > color: #333333;
    > }
    >
    > ..SubNormal
    > {
    > font-family: verdana,arial,geneva,sans-serif;
    > font-size: 11px;
    > font-weight: normal;
    > color: #333333;
    > }
    >
    > As you can see, all that I am trying to do is reduce the font in the
    > datagrid to 11px rather than the standard 13px
    >
    >
    >
     
    =?Utf-8?B?SmVyZW15IERhdmlz?=, Sep 22, 2004
    #3
  4. Try

    ..SubNormal
    {
    font-size: 11px!important
    }

    --
    Eliyahu

    "Laurence Neville" <> wrote in message
    news:...
    > Since I added a style for TD elements to my style sheet I have been unable
    > to control the look of datagrids using the CssClass properties. Maybe

    there
    > is no way round it, but I really need to keep the TD style in place to
    > control other elements on the page.
    >
    > Is there a way around this?
    >
    > Here is the code from my datagrid:
    >
    > <ASP:DataGrid EditItemStyle-CssClass="SubNormal"
    > FooterStyle-CssClass="SubNormal" HeaderStyle-CssClass="SubNormal"
    > ItemStyle-CssClass="SubNormal" id="MyDataGrid1" runat="server"
    > CssClass="SubNormal" EnableViewState="True"
    > Width="100%" BackColor="#ffffff" BorderColor="black" ShowFooter="false"
    > CellPadding="3" CellSpacing="0"
    > HeaderStyle-BackColor="#ffcc66" DataKeyField="RowHeading_1"
    > AutoGenerateColumns="false" OnEditCommand="MyDataGrid1_Edit"
    > OnCancelCommand="MyDataGrid1_Cancel" OnUpdateCommand="MyDataGrid1_Update">
    >
    > Here is the code from my CSS file:
    >
    > BODY, TD, P, LI, BLOCKQUOTE {
    > font-family: verdana,arial,geneva,sans-serif;
    > font-size: 13px;
    > font-weight: normal;
    > color: #333333;
    > }
    >
    > .SubNormal
    > {
    > font-family: verdana,arial,geneva,sans-serif;
    > font-size: 11px;
    > font-weight: normal;
    > color: #333333;
    > }
    >
    > As you can see, all that I am trying to do is reduce the font in the
    > datagrid to 11px rather than the standard 13px
    >
    >
     
    Eliyahu Goldin, Sep 22, 2004
    #4
  5. Thanks, adding TD to the .SubNormal rule did the job. I also removed the
    redundant rules as you suggested.

    Thanks again.

    Laurence Neville

    "Jeremy Davis" <> wrote in message
    news:...
    > The problem is that IIRC the css class for the datagrid is applied to the
    > <tr> tags and not the <td>, so your first rule applies directly to the
    > <td>
    > and is overriding the .SubNormal style on the <tr>. (Somebody correct me
    > if
    > I'm wrong about where datagrid applies css classes.)
    >
    > To fix this, you can just make your second rule more specific:
    > .SubNormal TD {
    > font-size: 11px;
    > }
    >
    > Note also that you can take out the other style bits from this rule, since
    > they are identical to the first rule and will inherit.
    > For more information about rule specificity and the cascade, see
    > http://www.w3.org/TR/REC-CSS2/cascade.html#cascade
    >
    > HTH
    >
    > "Laurence Neville" wrote:
    >
    >> Since I added a style for TD elements to my style sheet I have been
    >> unable
    >> to control the look of datagrids using the CssClass properties. Maybe
    >> there
    >> is no way round it, but I really need to keep the TD style in place to
    >> control other elements on the page.
    >>
    >> Is there a way around this?
    >>
    >> Here is the code from my datagrid:
    >>
    >> <ASP:DataGrid EditItemStyle-CssClass="SubNormal"
    >> FooterStyle-CssClass="SubNormal" HeaderStyle-CssClass="SubNormal"
    >> ItemStyle-CssClass="SubNormal" id="MyDataGrid1" runat="server"
    >> CssClass="SubNormal" EnableViewState="True"
    >> Width="100%" BackColor="#ffffff" BorderColor="black" ShowFooter="false"
    >> CellPadding="3" CellSpacing="0"
    >> HeaderStyle-BackColor="#ffcc66" DataKeyField="RowHeading_1"
    >> AutoGenerateColumns="false" OnEditCommand="MyDataGrid1_Edit"
    >> OnCancelCommand="MyDataGrid1_Cancel"
    >> OnUpdateCommand="MyDataGrid1_Update">
    >>
    >> Here is the code from my CSS file:
    >>
    >> BODY, TD, P, LI, BLOCKQUOTE {
    >> font-family: verdana,arial,geneva,sans-serif;
    >> font-size: 13px;
    >> font-weight: normal;
    >> color: #333333;
    >> }
    >>
    >> ..SubNormal
    >> {
    >> font-family: verdana,arial,geneva,sans-serif;
    >> font-size: 11px;
    >> font-weight: normal;
    >> color: #333333;
    >> }
    >>
    >> As you can see, all that I am trying to do is reduce the font in the
    >> datagrid to 11px rather than the standard 13px
    >>
    >>
    >>
     
    Laurence Neville, Sep 23, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U3RldmUgS2FsbGFs?=

    CssClass on DataGrid Edit, Update & Cancel buttons

    =?Utf-8?B?U3RldmUgS2FsbGFs?=, Jul 6, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    751
    =?Utf-8?B?U3RldmUgS2FsbGFs?=
    Jul 6, 2004
  2. Jim Langston
    Replies:
    15
    Views:
    500
    Jim Langston
    Feb 9, 2006
  3. Julien
    Replies:
    1
    Views:
    196
    Steven D'Aprano
    Aug 28, 2011
  4. Laurence Neville

    Datagrid CssClass being overridden by TD style

    Laurence Neville, Sep 22, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    138
    Eliyahu Goldin
    Sep 22, 2004
  5. Sky
    Replies:
    2
    Views:
    306
    Robert Koritnik
    Oct 1, 2004
Loading...

Share This Page