title: Asp.net Css Gridview Styling
body: <p>I have an asp.net gridview. i have applied a style to the main headings bar using shading.
  This works fine in IE9 but it doesnt use the shading in Chrome. I use the exact same shading for div etc in my webapplication and both Chrome and IE9 work fine.
  So why does Chrome not like my CSS? (specifically the 3 shading lines in .mGrid th shown below)</p>
  
  <p>thanks
  Damo</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;asp:GridView ID="GridViewMain" OnRowDataBound="RowDataBound" OnPageIndexChanging="gridView_PageIndexChanging"
                                          runat="server"  AllowPaging="True" PageSize="50" PagerSettings-Position="TopAndBottom"
                                          CssClass="mGrid"
                                          PagerStyle-CssClass="pgr"
                                          AlternatingRowStyle-CssClass="alt"
                                          &gt;
                                       &lt;/asp:GridView&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* Grids */
  
  .mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;font-family:Verdana; font-size:12px; }
  
  .mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }
  
  .mGrid th { padding: 4px 2px; color: #000000; 
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
              background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
              background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */
              background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;         
            }
  
  .mGrid .alt { background: #fcfcfc; }
  
  .mGrid .pgr {background: #FFFFFF; }
  
  .mGrid .pgr table { margin: 5px 0; }
  
  .mGrid .pgr td { border-width: 0px; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  
  
  .mGrid .pgr a { color: #666; text-decoration: none; }
  
  .mGrid .pgr a:hover { color: #000; text-decoration: none; }
  
  .mGrid tr:hover{background-color:#FFFFCC;color:white;}
  
  /* End Grids */
  </code></pre>