asp.net datagrid borders appear different (bad) in other browsers

Question

Hey, I realize that pages are just going to look different in varying browsers, but mine is looking awesome in Chrome, ok in mozilla, and pretty bad in IE 7.

Sadly, most people using my page will use IE.

My issue is with the borders. I have a redish border around the rows of the grid. In chrome they all appear as they should. In Firefox the bottom and top of each row are working, as well as the right and left of the outside columns, but all the inner columns do not have vertical borders.

In IE, all the borders are missing. There are simply white gaps between my columns and rows.

I would greatly appreciate any tips or tricks you guys could toss my way.

EDIT:

  <asp:GridView ID="ProductsGrid" runat="server" 
        AutoGenerateColumns="False" Height="323px" 
        style="margin-top: 23px; margin-left: 0px;" BackColor="White" 
        BorderStyle="None" BorderWidth="0px" CellPadding="4"
        Width="1210px" OnPageIndexChanging="gridView_PageIndexChanging"
        onrowdatabound="ProductsGridView_RowDataBound" AllowPaging="True"
        PageSize="25">

        </Columns>
        <EmptyDataRowStyle BackColor="Gray" />
        <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
        <RowStyle ForeColor="#330099" BackColor="White" BorderColor="#6E1414" 
            BorderWidth="1px" />
        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
        <SortedAscendingCellStyle BackColor="#FEFCEB" />
        <SortedAscendingHeaderStyle BackColor="#AF0101" />
        <SortedDescendingCellStyle BackColor="#F6F0C0" />
        <SortedDescendingHeaderStyle BackColor="#7E0000" />
    </asp:GridView>

Answer 1

Try adding the GridLines property to your GridView:

<asp:GridView ID="ProductsGrid" runat="server" GridLines="None" ...

You can set the proprety to None, Both, Horizontal, or Vertical. You should be able to get it work as you intend in using the GridLines property.

EDIT: I think I have it working as you require. Try the following:

Create a CSS style:

<style type="text/css">
    .yourRowStyle td
    {
        border: solid 1px #6E1414;
    }
</style>

Then in your replace your RowStyle with:

<RowStyle CssClass="yourRowStyle" ForeColor="#330099" BackColor="White" />

Also make sure to have your GridView set with GridLines="None".

I tested it and this should work although I am not exactly sure what you want it to look like. You can Css will override the GridViews quirks.