I'm really struggling with this issue. I have a GridView and I want to ensure that the borders are consistent across all browsers. Right now, I'm experiencing different outcomes in IE, FF, and Chrome. Despite my best efforts with CSS (I'm relatively new to it), one of the browsers always displays the borders correctly. The CSS for the gridview 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;
}
My goal is to have the table resemble this basic drawing :D. The header should not have any borders between cells.
____________________________
|____________________________|
|___|__________|________|____|
|___|__________|________|____|
|___|__________|________|____|
In IE, there's no top border on the header. In FF, everything looks good, and Chrome shows separators in the header. This discrepancy has been bothering me for some time now, so I hope someone can provide some clarity on this.
Thank you!