By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

Why doesn't this work with <TR> tags?

P: n/a
..rowbackgrnd {
background-color: #E4E4F2;
border-bottom: 1px solid Black;
border-left: 1px solid #E4E4F2;
border-right: 1px solid #E4E4F2;
border-top: 1px solid Black
}

It works for <td> tags but not <tr> tags. I've tried a number of
alternatives but I canlt seem to figure out what I'm doing wrong.

Thanks in advance for any guidance.

Monty
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Monty wrote:
.rowbackgrnd {
background-color: #E4E4F2;
border-bottom: 1px solid Black;
border-left: 1px solid #E4E4F2;
border-right: 1px solid #E4E4F2;
border-top: 1px solid Black
}

It works for <td> tags but not <tr> tags. I've tried a number of
alternatives but I canlt seem to figure out what I'm doing wrong.


What browser(s) have you had trouble with? <tr> elements cannot
contain data; they can only contain <td> or <th> elements. IIRC, some
browsers fail to apply css properties to them because of that. I ran
into this not too long ago. My solution was to apply them to the td
element instead, e.g.,

..rowbackgrnd TD {
background-color: #E4E4F2;
border-bottom: 1px solid Black;
border-top: 1px solid Black
}

I applied the left and right borders to the table instead of td, since
that creates vertical borders inside the table, which you may not want.

table {
border-left: 1px solid #E4E4F2;
border-right: 1px solid #E4E4F2;
}

Note that this will only work if you have chosen border-collapse:
collapse. If you choose border-collapse:separate, there will be gaps
in the table borders and cells. :( Further problem: IE 5/Mac does
not support border-collapse property. Workaround: In the html, add
the attribute CELLSPACING="0" to the table start tag.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
Monty wrote:

<snip>
It works for <td> tags but not <tr> tags. I've tried a number of
alternatives but I canlt seem to figure out what I'm doing wrong.


Table rows are magic and don't have borders. You can put the borders on the
cells inside the row though - top and bottom on all, left on the first,
right on the last. Of course you have to collapse the borders or it looks
awful.

--
David Dorward <http://dorward.me.uk/>
Jul 20 '05 #3

P: n/a
In article David Dorward wrote:
Monty wrote:

<snip>
It works for <td> tags but not <tr> tags. I've tried a number of
alternatives but I canlt seem to figure out what I'm doing wrong.


Table rows are magic and don't have borders.


That is not true. Table rows can't have borders in separate border
modell, but can have that in collapsing border modell.

Borders on tr don't work on IE, even if collapsed border modell is used.

What borders are used in collapsed border modell:
http://www.w3.org/TR/CSS21/tables.ht...ict-resolution

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #4

P: n/a
Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.cis.dfn.de>. ..
In article David Dorward wrote:
Monty wrote:

<snip>
It works for <td> tags but not <tr> tags. I've tried a number of
alternatives but I canlt seem to figure out what I'm doing wrong.


Table rows are magic and don't have borders.


That is not true. Table rows can't have borders in separate border
modell, but can have that in collapsing border modell.

Borders on tr don't work on IE, even if collapsed border modell is used.

What borders are used in collapsed border modell:
http://www.w3.org/TR/CSS21/tables.ht...ict-resolution

Thanks to all who responded. I had tried IE6 and Mozilla 1.5 without
success.

I have a bunch of existing pages that have <TR>s with the
background-color set and I just wanted to change the class definition
so that there would be rules at the top and bottom of the rows. But
it looks like it's going to be too much work to implement.

Monty
Jul 20 '05 #5

P: n/a
Monty wrote on 11 dec 2003 in comp.infosystems.www.authoring.stylesheets:
.rowbackgrnd {
background-color: #E4E4F2;
border-bottom: 1px solid Black;
border-left: 1px solid #E4E4F2;
border-right: 1px solid #E4E4F2;
border-top: 1px solid Black
}

It works for <td> tags but not <tr> tags. I've tried a number of
alternatives but I canlt seem to figure out what I'm doing wrong.

Thanks in advance for any guidance.


try this:

===========================

<style>
..trtdbackgrnd, .rowbackgrnd td {
background-color: #E4E4F2;
border-bottom: 1px solid Black;
border-left: 1px solid #E4E4F2;
border-right: 1px solid #E4E4F2;
border-top: 1px solid Black
}
</style>

<table>
<tr class="rowbackgrnd">
<td>----1---</td>
<td>----2---</td>
<td>----3---</td>
</tr>
</table>

<br>or:<br>

<table>
<tr>
<td class="trtdbackgrnd">
<table>
<tr>
<td>----1---</td>
<td>----2---</td>
<td>----3---</td>
</tr>
</table>
</td>
</tr>
</table>

=============================

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.