GridView Lines Not Showing up in IE

Question

I am developing an asp page and the GridView GridLines are not showing up in IE but it is showing up on Firefox and Chrome. Is there something specific that needs to be done for the IE side. This is my css file for GridView:

        /* grid table */
        table.gridview { border-collapse: collapse; margin: 0px !important; border: #6593CF 1px solid; }
        .gridview td { font-size: 11px; font-family: Arial; color: #000000; cursor: default; text-align: left; }
        .gridview th { font-size: 11px; font-family: Arial; color:  #484848; cursor: default; text-align: left; }
        table.gridview a { color: #000000; text-decoration: none; }
        table.gridview a:hover { text-decoration: underline; }

        /* header row */
        tr.gridview_hdr { background-color: #DEECFF; }
        .gridview_hdr th { color: black; font-weight: normal; text-align: left;border-top: solid 1px #6593CF; border-bottom: solid 1px #6593CF; border-left: solid 1px #6593CF; border-right: solid 1px #6593CF; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; }
        .gridview_hdr th a { color: #000000; text-decoration: none; font-weight: bold; }
        .gridview_hdr th a:hover { color: #000000; text-decoration: underline; }

        /* item row */
        tr.gridview_itm { background-color: #FFFFFF; }
        .gridview_itm td { padding: 2px 5px; border-right: #FFFFFF 0px solid; border-top: #FFFFFF 1px solid; border-left: #FFFFFF 0px solid; border-bottom: #ADD1FF 1px solid; }
        .gridview_itm td a { text-decoration: underline; }

        /* alternating item row */
        tr.gridview_aitm { background-color: #FFFFFF; }
        .gridview_aitm td { padding: 2px 5px; border-right: #FFFFFF 0px solid; border-top: #FFFFFF 1px solid; border-left: #FFFFFF 0px solid; border-bottom: #ADD1FF 1px solid; }
        .gridview_aitm td a { text-decoration: underline; }

        /* pager row */
        tr.gridview_pgr { width : 100%;
                            font-family:verdana;
                            font-weight: bold;
                            font-size: 11pt;
                            color: #ff9900;                    
                        }
        .gridview_pgr td { background-image: url(/Monitor/App_Themes/Sugar2006/images/bg.gif); background-repeat: repeat-x; height: 23px; padding: 0px; font-size: 10px; font-family: Arial; }
        .gridview_pgr_ddl { font-size: 10px; font-family: Arial; }
        .gridview_pgr A{
            font-family:verdana;
            font-size: 9pt;
            text-decoration: none;
            color: #0000ff;                
            } 

and this is my aspx page:

        asp:GridView 
            ID="GridView1" 
            runat="server" 
            CssClass="gridview" 
            RowStyle-CssClass="gridview_itm" 
            AlternatingRowStyle-CssClass="gridview_aitm" 
            HeaderStyle-CssClass="gridview_hdr" 
            PagerStyle-CssClass="gridview_pgr" 
            AutoGenerateColumns="False" 
            AllowPaging="True" PageSize="50" Width="100%" AllowSorting="True" 
            onsorting="GridView1_Sorting" onrowdatabound="gridView1_RowDataBound" 
            onpageindexchanging="GridView1_PageIndexChanging">

Also I do have GridLines = "Both" on the GridView properties. What am I doing wrong?

Thanks for your help.

Answer 1

With the GridView, the declarative bordercolor attribute adds an inline style declaration which only applies to the table itself, not individual cells.

Adding the bordercolor attribute programmatically does not use an inline style, but uses the HTML bordercolor property, which browsers apply to ALL borders inside the table.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
   foreach (TableCell tc in e.Row.Cells)
   {
     tc.Attributes["style"] = "border-color: #c3cecc";
   };
}