CSS inheritance question

Hallo!

I have to build up a html page with code coming from two source. One
source is a table without any formatting information and I cannot easily
influence this code. My (naive?) idea to format the table had been to
use a sorrounding <div> tag and css to influence the table contained in
the div tag.
Like
<div class="foobar">
<!-- code not coming from me-->
<table>
<tr>
<td>somecontent</td>
<td>somecontent</td>
</tr>
</table>
<!-- end of code not coming from me-->
</div>

and the CSS
td.foobar {
border-bottom-style : solid;
border-bottom-width : thick;
border-bottom-color : Black;
}

unfortunately this does not work (IE 6, windows) probably the
class="foobar" attribute should be in the td tag but manipulating the
code of the table would be complicated.
Is there any way I can solve this problem without having to touch the
code of the table?

Many thanks,

Hans

"Dr. Hans M. Rupp" <hans-michael.rupp (AT) danet (DOT) de> wrote:

I have to build up a html page with code coming from two source.
One source is a table without any formatting information and I
cannot easily influence this code.

Sounds problematic. But if CSS inheritance is really the essential
problem, then comp.infosystems.www.authoring.stylesheets would be the
right group - though mostly people understand any answer to questions
about inheritance only if they have already read the relevant part of
the specification a few times. :-)

But DHTML _might_ be part of a solution. We just don't know yet.
It is quite possible that influencing the markup for the table, no
matter how difficult, is the easiest and safest way.

div class="foobar"
!-- code not coming from me--
table
tr
td>somecontent</td
- -
and the CSS
td.foobar {

OK, this was an easy one, and it's really about CSS alone.

unfortunately this does not work (IE 6, windows) probably the
class="foobar" attribute should be in the td tag but manipulating
the code of the table would be complicated.

No, the reason is that the td elements do not belong to class 'foobar',
or any class for that matter. An element does _not_ inherit a class
from its parent element. (Except possibly through an obscure principle
that says that <col> class is inherited.) You need a contextual
selector.

Use
..foobar td {
instead. This refers to those td elements that appear inside some
element that belongs to class 'foobar'.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html