469,271 Members | 997 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

TR's w no Style?

I ran across a situation where I could not format my row bottom border
color.

I was using:

<tr style="border-bottom:solid 1px #cccccc;">

and it didn't work, but

<td style="border-bottom:solid 1px #cccccc;">

did.

Why is that?

Mike

Oct 5 '05 #1
15 28845
mike wrote:
I ran across a situation where I could not format my row bottom border
color.
It generally helps if you:
1. Provide a URI to a page that demonstrates the issue
2. Mention which browser is experiencing the problem
I was using:

<tr style="border-bottom:solid 1px #cccccc;">

and it didn't work, but

<td style="border-bottom:solid 1px #cccccc;">


Such incomplete test cases are useless. However, since I have seen this
problem before, it is a bug with Firefox 1.0.x that has been fixed in
more recent builds. Do any of these test cases demonstrate the issue?

http://lachy.id.au/dev/css/tests/css...t-dsp-23-d.xht
http://lachy.id.au/dev/css/tests/css...t-dsp-26-d.xht
http://lachy.id.au/dev/css/tests/css...t-dsp-27-d.xht
http://lachy.id.au/dev/css/tests/css...t-dsp-37-d.xht
http://lachy.id.au/dev/css/tests/css...t-dsp-40-d.xht
http://lachy.id.au/dev/css/tests/css...t-dsp-42-d.xht

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox
Oct 6 '05 #2
Sorry, its IE and the test case is simply:

<table>
<tr style="border-bottom:solid 1px #cccccc;">
<tr>stuff1</tr><tr>stuff2</tr><tr>stuff3</tr><tr>stuff4</tr>
</tr>
<tr style="border-bottom:solid 1px #cccccc;">
<tr>stuff1</tr><tr>stuff2</tr><tr>stuff3</tr><tr>stuff4</tr>
</tr>
<table>

should be a bottom border.

Oct 6 '05 #3
In our last episode, mike <hi****@charter.net> pronounced to
comp.infosystems.www.authoring.html:

<snip code>
should be a bottom border.


No, it shouldn't be anything. Try running your page through the
validator. You can't nest table rows.

--
Mark Parnell
http://clarkecomputers.com.au
Oct 6 '05 #4
in comp.infosystems.www.authoring.html, mike wrote:
I ran across a situation where I could not format my row bottom border
color.

I was using:

<tr style="border-bottom:solid 1px #cccccc;">

and it didn't work, but

<td style="border-bottom:solid 1px #cccccc;">

did.

Why is that?


Missing border-collapse:collapse; on table?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Oct 6 '05 #5
Sorry about that .... typos there. Those were <td> tags ..

<table>
<tr style="border-bottom:solid 1px #cccccc;">
<td>stuff1</td><td>stuff2</td><td>stuff3</td><td>stuff4</td>
</tr>
<tr style="border-bottom:solid 1px #cccccc;">
<td>stuff1</td><td>stuff2</td><td>stuff3</td><td>stuff4</td>
</tr>
<table>

Oct 6 '05 #6
What I really want is the rows to be underlined.

<table cellspacing="0">
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<table>

This is the workaround. I would think I could format the <tr> row tags
to achieve this.

Comments?

Mike

Oct 6 '05 #7
Els
mike wrote:
What I really want is the rows to be underlined.

<table cellspacing="0">
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<table>

This is the workaround. I would think I could format the <tr> row tags
to achieve this.

Comments?


Yes.
Take the cellspacing off the table and the styles off the td elements,
give the table a class (unless you want that border on all tables),
and set the style in the stylesheet/styleblock:

table.someclass{
border-collapse:collapse;
}
table.someclass td{
border-bottom:solid 1px #cccccc;
}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 6 '05 #8
So, you are saying that the mark-up is on the TD tag and is NOT
AVAILABLE on the TR tag, correct?

Oct 6 '05 #9
mike wrote:
So, you are saying
Well, I'm not sure what was said, since you didn't quote what you are
replying too! Please learn to quote properly.
that the mark-up is on the TD tag and is NOT AVAILABLE on the TR tag, correct?


No, you can style tr elements in the same way you can style td elements.
Just change the selector to select tr instead of td, like this:

table.someclass{
border-collapse:collapse;
}
table.someclass tr{
border-bottom:solid 1px #cccccc;
}

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox
Oct 6 '05 #10
In our last episode, mike <hi****@charter.net> pronounced to
comp.infosystems.www.authoring.html:
Sorry about that .... typos there.


That's one of many reasons a URL is much more useful than snippets of
code.

--
Mark Parnell
http://clarkecomputers.com.au
Oct 7 '05 #11
table.someclass tr{
border-bottom:solid 1px #cccccc;
}

This is not going to work. It the same thing as if I manually put:

<tr style= "border-bottom:solid 1px #cccccc;">

Which i did in the first post. In that post I asked why this does not
work. I am using IE.

Oct 7 '05 #12
Els
mike wrote:
table.someclass tr{
border-bottom:solid 1px #cccccc;
}

This is not going to work. It the same thing as if I manually put:

<tr style= "border-bottom:solid 1px #cccccc;">

Which i did in the first post. In that post I asked why this does not
work. I am using IE.


It doesn't work on TR in IE.
Specs dictate it should, but IE isn't following the specs in this.
Setting it on the TD instead is the workaround for it.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 7 '05 #13
"mike" <hi****@charter.net> wrote:
table.someclass tr { border-bottom: solid 1px #cccccc; }
This is not going to work. It the same thing as if I manually put:
<tr style= "border-bottom:solid 1px #cccccc;">

Which i did in the first post. In that post I asked why this does not
work. I am using IE.


The very first response you got was the correct one: you haven't
specified the table's border model. Since you want inline style, here's
how:

<table cellspacing=0 style="border-collapse:collapse;">
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<table>
Oct 7 '05 #14
Els
Keith Baird wrote:
"mike" <hi****@charter.net> wrote:
table.someclass tr { border-bottom: solid 1px #cccccc; }
This is not going to work. It the same thing as if I manually put:
<tr style= "border-bottom:solid 1px #cccccc;">

Which i did in the first post. In that post I asked why this does not
work. I am using IE.


The very first response you got was the correct one: you haven't
specified the table's border model. Since you want inline style, here's
how:

<table cellspacing=0 style="border-collapse:collapse;">
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<tr>
<td style="border-bottom:solid 1px #cccccc;">stuff1</td>
<td style="border-bottom:solid 1px #cccccc;">stuff2</td>
<td style="border-bottom:solid 1px #cccccc;">stuff3</td>
<td style="border-bottom:solid 1px #cccccc;">stuff4</td>
</tr>
<table>


That's what Mike meant from the beginning: it's a work-around for
having a bottom underlining on the TR.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 7 '05 #15
That's right Els .... I was saying that the border-bottom did not work
in TR's.

Oct 17 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by John MacIntyre | last post: by
23 posts views Thread by Bob Bedford | last post: by
5 posts views Thread by Gregor Rot | last post: by
10 posts views Thread by soup_or_power | last post: by
12 posts views Thread by Jerad Rose | last post: by
1 post views Thread by HoustonFreeways | last post: by
117 posts views Thread by phil-news-nospam | last post: by
7 posts views Thread by deste | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.