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

Author

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

Monty

2003-12-11, 8:26 pm

..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

Brian

2003-12-11, 8:26 pm

Monty wrote:

quote:

> .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

David Dorward

2003-12-11, 8:26 pm

Monty wrote:

<snip>

quote:

> 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/>

Lauri Raittila

2003-12-11, 8:26 pm

In article David Dorward wrote:

quote:

> Monty wrote:
>
> <snip>
>
>
> 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.h...lict-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.

Monty

2003-12-12, 1:37 pm

Lauri Raittila <lauri@raittila.cjb.net> wrote in message news:<MPG.1a43377265dcaafa989d60@news.cis.dfn.de>...

quote:

> In article David Dorward wrote:
>
> 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.h...lict-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

Evertjan.

2003-12-12, 1:37 pm

Monty wrote on 11 dec 2003 in comp.infosystems.www.authoring.stylesheets:

quote:

> .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)