Topic: want to display my alternate rows in different colors

I am writing a small application in rails that displays the search results.
I want the alternate rows to be displayed in different colors.
I have just learned CSS and I am faced with two problems.

I tried putting an id to a <tr> element and when I tired to define a backgorund-color in css, the background color did not change.
here is the sample code

<% for am_application in @am_applications %>

<tr id="rowcolor1">
<td><%=h am_application["business_application_name"].slice(0,30) %></td>

<td><%= am_application.application_description.slice(0,50) if am_application.application_description %></td>
</tr>
<% end %>


and in my css looks like (see the bottom of this code to find rowcolor1).

body 
{
    background-color: #beige;
    color: #333;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:   medium;
    line-height: 1.6em;
}


p, ol, ul, td {
  line-height: 18px;
  background: #eee;
}
h1, h2 {
   font-size:   150%;
   color: #007e7e;
   font-weight: bold;
   text-decoration: underline;
   font-family: "Comic Sans", "Apple Chancery", Cursive;
  border-bottom: thin dotted #999
}
h2
{
   font-size:  120%;
 
}
.text {
font-style: italic;
}
.navbar {
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: LightBlue;
}

.notice {
    color: red;
}
table
{
    border: thin dotted #7e7e7e;
    padding: 10px;

}
table .results
{
   font-family: "courier new", courier, monospace;
    font-size:  small;

}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color:#000; }

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin: 5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid grey;
  width: 100%;
}

div.progressBar div.background {
  background-color: #333;
  height: 18px;
  width: 0%;
}

#rowcolor1
{
background-color: yellow;
}


I have 2 issues here
how to change the background color of the rows and how do I do it on alternate rows?

Thanks

Re: want to display my alternate rows in different colors

This is wonderfully easy to do in rails

<tr class="<%= cycle("even", "odd") %>">

Then in your CSS

td.even {background:#fff;}
td.odd {background:#ccc;}

Remember to use classes instead of IDs for multiple instances, or you will break your validation. IDs are meant for elements that only show up once on your page.

Last edited by pimpmaster (2007-04-05 10:37:03)

Re: want to display my alternate rows in different colors

Hi,
I tried as per your suggestion but I could not get the backgroubnd colors changed.
I even tried tr.even and tr.odd in the css.
In my rhtml the code is

<body>
<table>
<tr class="title">
<th> <%= @title %>
</tr>
<tr class="rowheading">
<th>Application Name</th>
<th>Details</th>
<th>Business Area</th>
<!--
<th>Softwares used</th>
<th>Servers</th>
<th>Developers</th>
-->
</tr>



<% for am_application in @am_applications %>

<tr class="<%= cycle("even", "odd") %>">

<td><%=h am_application["business_application_name"].slice(0,30) %></td>

<td><%= am_application.application_description.slice(0,50) if am_application.application_description %></td>

<td>
    <% for am_ba in am_application.am_bas %>
        <%= am_ba.business_area.slice(0,30) + ' ' %>
    <%end %>
</td>
        <td><%= link_to 'More Details', :action => 'applications_show',
            :id => am_application,
            :server_name => params[:server_name],
            :dev_name => params[:dev_name],
            :software_name => params[:software_name],
            :ba_name => params[:ba_name],
            :app_name => params[:app_name]    %></td>
</tr>
<% end %>

</table>


and in css is
tr.even {background:red;}
tr.odd {background:brown;}

Though the funny part is when I change the css to
tr.even {color:red;}
tr.odd {color:brown;}

The text color changes. I do not know why the background color is not changing.
In my first post I have posted the whole css in case you need to take a look at that.
Thanks

Re: want to display my alternate rows in different colors

make your CSS like this

tr.even td { background-color: red; }
tr.odd td { background-color: blue; }

Re: want to display my alternate rows in different colors

If you are going to use words instead of hex values in your CSS, use background-color:red; instead of just background.

Edit: I see tortoise beat me to it. I must be slow today

Last edited by pimpmaster (2007-04-05 15:38:26)

Re: want to display my alternate rows in different colors

the tr.odd td thing worked. thanks a lot.
Why does tr.odd not work? I am new to css and wanted to find out why tr by itself is not working for backgroud-color though it works for color.
Thanks

Re: want to display my alternate rows in different colors

My guess would be the background of a td sits on top of and covers the background of a tr. But a tr can not directly contain any text, so any text styling you specify will cascade down into the td.

Just a guess.

Re: want to display my alternate rows in different colors

Hey thanks anyways..

Re: want to display my alternate rows in different colors

Tortoise guessed it. Your original CSS file has

td {
   line-height: 18px;
   background: #eee;}

So that'll override the tr declaration.

"tr.even td" has a "higher specificity" than just "td", so it overrules the "td ... #eee" rule.