Cannot seem to get rid of alternating row color

Tom Knowlton
Tom Knowlton used Ask the Experts™
on
http://test.huskyshoponline.com//checkout.aspx?checkout=1go

(use mike for both username and password if you need to authenticate)

For the shipping method, the second row is grey.

I want to get rid of the grey color, but I can't find what is setting it to grey.


Here is the styling applied:
.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #fff;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}

.grid-view tr.normal
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
}

.grid-view tr.alternate
{
   color: White;
   background-color: Blue;
   height: 25px;
   vertical-align: middle;
   text-align: center;
}

.grid-view tr.normal:hover
{
   background-color: Black;
   color: White;
   font-weight: bold;
}

.grid-view tr.alternate:hover
{
   background-color: Black;
   color: White;
   font-weight: bold;
}


.grid-view tr.selected
{
   background-color: Blue;
   color: White;
   font-weight: bold;
}

.grid-view tr.selected:hover
{
   background-color: White;
   color: Blue;
   font-weight: bold;
}

Open in new window



Here is the relevant page markup:
<asp:GridView ID="gvShipping" runat="server" AutoGenerateColumns="False" DataKeyNames="TABLE"
OnRowCommand="gvShipping_RowCommand" Visible="False" GridLines="None"
Width="350px" BorderStyle="Solid" BorderWidth="1px" EnableModelValidation="True"
OnRowCreated="gvShipping_RowCreated" 
        onselectedindexchanged="gvShipping_SelectedIndexChanged" 
        onrowdatabound="gvShipping_RowDataBound" CssClass="grid-view">
    <Columns>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select Shipping Method">
            <EditItemTemplate>
                <asp:TextBox ID="textBox1" runat="server" Text='<%# Bind("DISPLAY") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblDisplay" runat="server" CommandName="Select" 
                    Text='<%# Bind("DISPLAY") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:CommandField />
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" HeaderText="Amount">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Right" />
            <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:TemplateField>
        <asp:BoundField DataField="TABLE" HeaderText="Table" Visible="False" />
        <asp:ButtonField CommandName="Select" HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select" Text="Select">
        <HeaderStyle HorizontalAlign="Right" />
        <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:ButtonField>
    </Columns>



Been staring at this for a while.  I think another pair of eyes could help me.



Tom


<EditRowStyle HorizontalAlign="Right" />
<HeaderStyle HorizontalAlign="Right" />
<RowStyle HorizontalAlign="Left" />
</asp:GridView>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Tom KnowltonWeb developer

Author

Commented:
Here is the page with the shipping methods


alt rows
jonahzona
Top Expert 2011

Commented: 
<tr class="alternate" align="left" style="background-color:Silver;border-color:Transparent;border-width:0px;border-style:None;" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvShipping','Select$1')">

Open in new window


The background-color is set to Silver.
Top Expert 2011
Commented:
If you adjust your CSS that you might slightly, it will overwrite this.

See the !important after the blue background color.

.grid-view tr.alternate {
    background-color: Blue !important;
    color: White;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window


 Screenshot with !important added to bg color
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
jonahzona
Top Expert 2011

Commented:
It looks like you were able to get it working. Did my fix help you at all?

From what I can tell you removed the styling from the alternate table.

Also, I would recommend changing the password for logging in. When I used it access to the admin panel came up. I don't want some troll messing with your site!

:)
Tom KnowltonWeb developer

Author

Commented:
>>>>Also, I would recommend changing the password for logging in. When I used it access to the admin panel came up. I don't want some troll messing with your site!

Understood.

I'll see about having the login info removed from this question.
jonahzona
Top Expert 2011

Commented:
You could just change the password on that UN. That would probably be the fastest way...
Tom KnowltonWeb developer

Author

Commented:
jonahzone:

The points are yours.

I was wondering if you could advise me on a related question.

First....how can I make the "Select" show up on hover?

Second:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27043953.html


Here's hoping I caught you online!


Tom
Tom KnowltonWeb developer

Author

Commented:
thx
jonahzona
Top Expert 2011

Commented:
Change these two rules to below:
.grid-view tr.normal:hover, .grid-view tr.normal:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window


and 

.grid-view tr.alternate:hover, .grid-view tr.alternate:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window


Notice I added the second half of the selector to the preexisting :hover selectors.
jonahzona
Top Expert 2011

Commented:
I will take a look at the link you posted.
Tom KnowltonWeb developer

Author

Commented:
NOTES ON SOLUTION SO FAR:


MARKUP:
<asp:GridView ID="gvShipping" runat="server" AutoGenerateColumns="False" DataKeyNames="TABLE"
OnRowCommand="gvShipping_RowCommand" Visible="False" GridLines="None"
Width="350px" BorderStyle="Solid" BorderWidth="1px" EnableModelValidation="True"
OnRowCreated="gvShipping_RowCreated" 
        onselectedindexchanged="gvShipping_SelectedIndexChanged" 
        onrowdatabound="gvShipping_RowDataBound" CssClass="grid-view">    
    <Columns>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select Shipping Method">
            <EditItemTemplate>
                <asp:TextBox ID="textBox1" runat="server" Text='<%# Bind("DISPLAY") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblDisplay" runat="server" CommandName="Select" 
                    Text='<%# Bind("DISPLAY") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:CommandField />
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" HeaderText="Amount">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Right" />
            <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:TemplateField>
        <asp:BoundField DataField="TABLE" HeaderText="Table" Visible="False" />
        <asp:ButtonField CommandName="Select" HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select" Text="Select">
        <HeaderStyle HorizontalAlign="Right" />
        <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:ButtonField>
    </Columns>

<EditRowStyle HorizontalAlign="Right" />
<HeaderStyle HorizontalAlign="Right" />
</asp:GridView>

Open in new window






CODE BEHIND:

(Note:  This was originally found in RowCreated, and had trouble working correctly for that event handler.  Moving the same code over to RowDataBound seemed to fix the hover / selected assignment of the CSS styling)

  protected void gvShipping_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          //  e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
          //  e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.gvShipping, "Select$" + e.Row.RowIndex);


        }

        //Add CSS class on header row.
        if (e.Row.RowType == DataControlRowType.Header)
            e.Row.CssClass = "header";

        //Add CSS class on normal row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Normal)
            e.Row.CssClass = "normal";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Alternate)
            e.Row.CssClass = "alternate";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Selected)
            e.Row.CssClass = "selected";

    }

Open in new window







CSS:


(Note:  It took me a while to realize that "normal" did not apply to ALL rows when I was not interested in alternate rows.  Once I realized I needed to always set styling for alternate rows as well....things smoothed-out quite a bit)

.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #fff;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}



.grid-view tr.normal
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.normal:hover
{
    background-color: Blue;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.alternate
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.alternate:hover
{
    background-color: Blue;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.grid-view tr.selected
{
    background-color: Green;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.selected:hover
{
    background-color: White;
    color: Green;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

Open in new window

Tom KnowltonWeb developer

Author

Commented:
Notes on solution does not include your fix for the "Select" link yet, sorry.  :)
Tom KnowltonWeb developer

Author

Commented:
FINAL SOLUTION:

MARKUP:
<asp:GridView ID="gvShipping" runat="server" AutoGenerateColumns="False" DataKeyNames="TABLE"
OnRowCommand="gvShipping_RowCommand" Visible="False" GridLines="None"
Width="350px" BorderStyle="Solid" BorderWidth="1px" EnableModelValidation="True"
OnRowCreated="gvShipping_RowCreated" 
        onselectedindexchanged="gvShipping_SelectedIndexChanged" 
        onrowdatabound="gvShipping_RowDataBound" CssClass="grid-view">    
    <Columns>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select Shipping Method">
            <EditItemTemplate>
                <asp:TextBox ID="textBox1" runat="server" Text='<%# Bind("DISPLAY") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblDisplay" runat="server" CommandName="Select" 
                    Text='<%# Bind("DISPLAY") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:CommandField />
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" HeaderText="Amount">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Right" />
            <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:TemplateField>
        <asp:BoundField DataField="TABLE" HeaderText="Table" Visible="False" />
        <asp:ButtonField CommandName="Select" HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select" Text="Select">
        <HeaderStyle HorizontalAlign="Right" />
        <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:ButtonField>
    </Columns>

<EditRowStyle HorizontalAlign="Right" />
<HeaderStyle HorizontalAlign="Right" />
</asp:GridView>

Open in new window





CODE-BEHIND:
   protected void gvShipping_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          //  e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
          //  e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.gvShipping, "Select$" + e.Row.RowIndex);


        }

        //Add CSS class on header row.
        if (e.Row.RowType == DataControlRowType.Header)
            e.Row.CssClass = "header";

        //Add CSS class on normal row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Normal)
            e.Row.CssClass = "normal";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Alternate)
            e.Row.CssClass = "alternate";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Selected)
            e.Row.CssClass = "selected";

    }

Open in new window





CSS:
.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #fff;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}



.grid-view tr.normal
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}




.grid-view tr.alternate
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}



.grid-view tr.selected
{
    background-color: Green;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.selected:hover
{
    background-color: White;
    color: Green;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.grid-view tr.alternate:hover, .grid-view tr.alternate:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

.grid-view tr.normal:hover, .grid-view tr.normal:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial