Very Newbie Question about Inheritance and Tables

body { font-family: Verdana, sans-serif; font-size: 10pt; }

[savvy1]

I noticed that I did
body { font-family: Verdana, sans-serif; font-size: 8pt; }

And my text does seem to be rendered in 10pt Verdana, however,
Inside of a TABLE, everything seems to revert back to browser default.

Doing something like
td,tr {font-size: 8pt; }

corrected it, but, why doesn't a table inherit the font-size specified?

I hope I worded this right, this is all new to me!

[Slade]

You're correct, and that seems to be the observed behaviour of IE and Opera...

I don't have access to my code right now, but I believe I've also used:

table {font-size:10px}

(Don't shoot me, if I'm wrong...)

Note that you can also use "input", and give it at the very least font/color/size definitions.

[savvy1]

Slade- Thanks for your reply, any idea why it does this? Is this correct behaviour for some reason? From everything I've read about CSS it seems like the properties should be inherited.

You said IE and Opera, and I also noticed that Mozilla 1.1 did this as well, which I thought was supposed to have the best CSS engine to date?? leading me to believe this may be correct behaviour? I can't find anything that would say why though..

I don't have access to my code right now, but I believe I've also used:
table {font-size:10px}
(Don't shoot me, if I'm wrong...)

Yup, that works as well, and probably the better way :) Don't worry no shooting around here! :)

Note that you can also use "input", and give it at the very least font/color/size definitions.

Sorry, unfamiliar with "input" what do you mean?

[pageoneresults]

You are going to find yourself faced with quite a few inheritance problems between the major browsers. Opera does not inherit the font-family for <h> tags. I had to declare a family in the h style for it to work correctly. IE has problems with inheritance from the body to tables. NN4.x has inheritance problems with everything!

There is a lot of information out there on font sizes and inheritance. A quick search on the phrase will show you that there are problems in the various browsers. You just need to test each time and make sure that your styles are cross browser friendly.

[savvy1]

pageone - wow somethng to look forward to! Lots of broken behaviour! :)

I'd read about the <h> problem... and you say that IE has problems with inheritance from the body to tables, but I seem to be seeing this problem with Mozilla 1.1, Opera 6, and IE 6.. Unless I've done something wrong and am not really seeing a problem, but the standard behaviour. And being such a novice at this, that wouldn't surprise me.

Now to learn what DIV and SPAN are for.. :)

[starway]

The behaviour you described is the normal one. Text declarations you do for body are not applied to tables.
The most easy way is to specify different CSS classes for <td> and block-level elements (<div> and <p>). You can also skip text declaration for <td> if you place all the content into blocks:
...
<td><p class="something"> c o n t e n t </p></td>
...
This is the most safe way to make your page look as expected, and look as expected in all browsers.

[moonbiter]

It should be pointed out that while this is normal behavior, it is not correct behavior. ;)

[starway]

Maybe :)
I never thougth about it too much - as far as it's like that in all browsers without exceptions, I treat it as correct and act accordingly.

[savvy1]

The most easy way is to specify different CSS classes for <td> and block-level elements (<div> and <p>). You can also skip text declaration for <td> if you place all the content into blocks:
...
<td><p class="something"> c o n t e n t </p></td>
...
This is the most safe way to make your page look as expected, and look as expected in all browsers.

EEEK! I'm actually seeing some site's doing this or similiar. This seems totally backwards! If I have to do a class="xxx" or a <span> for each <td>, that sure is a LOT of extra code. I thought this CSS stuff was supposed to cut the code DOWN a lot..not the opposite :)
Also seems weird (to this newbie..) putting the content into block level <p> instead of inline elements..

It should be pointed out that while this is normal behavior, it is not correct behavior.

I have to agree, and, one of the many documents I read in the last few days about CSS (not browser specific) seemed to indicate that correct behaviour would be the opposite.

Sigh.. Are they simply trying to bias so much against table that you won't want to use them at all? :)

I'm not really using a table for layout/positioning but for what they were meant for (I think?) displaying a bunch of data in tabular fashion. Is even this against the spirit of CSS? Should I be doing something different?

Back to the expirimentation :) Thanks for everyones comments!

[tedster]

If I have to do a class="xxx" or a <span> for each <td>, that sure is a LOT of extra code.

I think you'd just declare your most basic style for the simple td, p elements, etc. You'd only need to create a special class for any exceptions from the norm.