css multiple table and backgrounds

Hello, i need some help getting my head around css. I want to use css to enhance my sites text and tables.

I have got a book, read some web tutorials and now have site style 2.1

Below is the css i am using, it is based on the basic one that come with site style 2.1

I have set table and td background to be white and page background to be blue.

Want i want to do now is change some individual table backgrounds to new colour.

table header
table nav - change background colour
table main
table footer - change backgound colour

i have tried these classes

table.nav
{
background-color: #******;
}

and

.tablenav
{
background-color: #******;
}



Anyhelp appriciated, just need to reach the eurika point when it all falls into place


---------start css--------------

{
background-color: #0080ff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
}

/* Because Netscape Navigator 4 does not allow inheritance into tables, and breaks inheritance after tables, rather than simply setting properties on the body and relying on inheritance, we explicitly set the properties using a selector group. */

/* This basic style sheet provides selectors for the most commonly used elements. Use it as the basis for your style sheets. */

table, td, p, li {
background-color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
color: #000000;
}

.navtable {
background-color: #808080;
font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
font-family: inherit;
}

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

p {
font-family: inherit;
}

a:link {
color: #0000ff;
font-family: inherit;
}

a:visited {
color: #0000ff;
font-family: inherit;
}

a:hover {
color: #8080ff;
font-family: inherit;
text-decoration: none;
}

a:active {
color: #ff0000;
font-family: inherit;
}

img {}

here is a sample of table cells with different colour backgrounds, whilst having a default white background for cells

will this work in netscape 4.** and with nested tables?

i only have IE 5.5 and Netscape 4.7 on my machine. It works on both these.

Have you tried the code???

no bt i will be doing so today, just i don't have netscape 4.** just netscape 6 and ie 5.5

going build linux box which has netscape plus other browsers i can test on

i really asked question because site style and amany other say to be compatable with other browsers you need to put stuff in blocks

body, table. p etc

but with this i found i could not change table background from default.


cheers for help

ok. not sure exactly what is meant by 'having to put stuff in blocks'. Have never seen site style or any other style software to be honest.

In the example I gave the <td> is the block and you can then apply a style to that block <td class=cellNav> so it is in a block really I guess.

Netscape 6 is used by less than 1% of surfers presently and looks like picking up slowly so I don't do stuff with Netscape 6 in mind (yet).
IE 6 on the other hand is already used by 25% of surfers so is worth testing for. (I'm naughty and haven't even seen IE 6 yet!!)

I can't vouch for the code in either of the version 6 browsers. Can only say it works on my two (IE 5.5 and Netscape 4.7) nested tables shouldn't make a difference as far as I can see but I'm no expert.

cheers

Following is a regularly updated page on browser usage stats. interesting:

http://www.upsdell.com/BrowserNews/stat_trends.htm#B3

If you look at my earlier post and the css file included you will see waht i mean, the note included in the css file was put there by site style.


example of block is this

table, td, p, li {
background-color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
color: #000000;
}

never seen or used the 'inherit' value myself like your stylesheet seems to all over the shop!

I'll have to leave that question to someone else.

sorry!