Gridview CSS borders inconsistent

Question

Hi, This is really bugging me. I'm using a GridView and want to format it in such a way that the borders are displayed the same in all browsers. At the moment, I'm getting varying results between IE, FF and Chrome. I'm not sure what I'm doing wrong in my CSS (I'm quite new to CSS) but something must be right as one of the browsers displays the borders correctly at any time. The gridview CSS is as follows:

.gridViewData
{
    height:auto;
    width:544px;
    position:relative;

    text-align:center;

     background-color:#7D9EBA;
     border:solid thin black;
     border-right:none 0px black;



}

.gridViewData td 
{
    padding:2px;
    border-top-style:none;
    border-bottom-style:solid;
    border-left-style:solid;
    border-right-style:none;
    border-color:Black;
    border-width:thin;



}

.gridViewData th
{
    height:10px;
    width: 544px;
    position:relative;
    text-align:center;
    border-top-style:dashed;
    border-bottom-style:solid;
    border-left-style:solid;
    border-right-style:none;
    border-color:Black;
    border-width:thin;
    background-color:white;


}

.gridViewData .alt
{
     background-color:Red; 
}

.gridViewData .pgr 
{ 
    background-color:Orange; 
}

I'd like the table to look like this crude attempt at a drawing :D. The header should have no borders between the cells.

 ____________________________
|____________________________|
|___|__________|________|____|
|___|__________|________|____|
|___|__________|________|____|

In IE, the header has no top border. In FF, it looks fine an in Chrome there are separators in the header. This has been bugging me for a while, so hopefully someone can shed some light on this.

Thanks

Answer 1

Use the GridView properties to achieve this rather than applying CSS to the generated table elements. For example, the header can be styled by applying the CSS to the property:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.headerstyle.aspx

EDIT:

Note that 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:

OnRowDataBound="MyGrid_RowDataBound"

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

I put out a blog post about this - check Lee Dumond's comment:

http://www.codersbarn.com/post/2009/05/31/Set-Color-of-GridLines-in-Gridview.aspx#comment