Table / CSS font bug? no inheritance

Table Css Font inherit

[eddh]

Hi please could someone help me on this, I'm pulling my hair out!

This is a problem with CSS font styles declaired for ul, p, h1, h2, h3 etc etc (BELOW)...

h1 {
margin: 10px 10px 10px 10px;
padding: 10px 0 0 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 110%;
color: #CCCCCC;
}

h2{
margin: 10px;
padding: 10px 0 0 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCCCCC;
}

h3{
margin: 10px;
padding: 10px 0 0 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #CCCCCC;
}

p {
margin: 10px 10px 10px 10px;
padding: 10px 0 0 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #0F0;
line-height: 1.2em;
}

ul {
margin: 0px 0 0 0px;
padding:0px 0 0 0px;
list-style-type: none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:80%;
color:#30C;

}

a:link {
color: #C00;
text-decoration: underline;
}

a:visited {
color: #DAD9D9;
text-decoration: underline;
}

a:hover {
color: #949398;
text-decoration: none;
}

a:active {
color: #F69;
text-decoration: none;
}

I know my css is working properly as I have a page calling these properties WITHOUT a table, and all properties work as they should do.

But I need to use a HTML table, and the instant I insert a table the properties go back to a default,

My question is, is there an easy fix for this?
Can I say "all font rules layed out in CSS apply to this table"? - my code is as below

div id="container">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="my photo address" width="x" height="y" /></td>
<td>
HERE IS THE TEXT I WANT TO FOLLOW THE RULES SET OUT IN MY CSS PAGE.

</td>

I already have the page in XHTML, by the line below....

!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[swa66]

As a first step: make sure your html and css validate.

What you describe isn't inheritance. Inheritance is when you set something on a parent and the child gets the setting too, without there being a selector that applies to it. Since your table cannot be a child of a <h1> etc., it can't inherit those settings.

Now if your table has a <p> inside a <td>, the selector
p { /*...*/ } will select it and try to apply what it has, but do remember that it specificity allows other settings to override these (e.g. #container * { /* ... */} will override your settings where they conflict (all other settings will both be applied).

I'd be very careful using the 'border="0" cellpadding="0" cellspacing="0"' html attributes if you rely on CSS to style a table. I guess you want to look at the border-collapse property.

[w3.org...]

If you want to set all font to the same font: set it on the body: it will inherit to all elements.

You can then add a second font for e.g. title tags with

h1, h2, h3, h4, h5, h6 {
 font: ...
}

[eddh]

Hi Thanks SW66, I guess Inheritance is the wrong word then.
My table is exactly how I want it, and the only difference between the 2 pages (the one that works) and the one that doesn't work is the following ...

***************WORKING****************************
div id="container">

HERE IS THE TEXT I WANT TO FOLLOW THE RULES SET OUT IN MY CSS PAGE. <p> fonts are the same as I specify in css as are <H1> <H2> etc

**************NOT WORKING*************************
div id="container">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="my photo address" width="x" height="y" /></td>
<td>
HERE IS THE TEXT I WANT TO FOLLOW THE RULES SET OUT IN MY CSS PAGE - but <P> <H1> etc ARE NOT following these rules!

</td>

It is really just the table code that seems to be overriding everything I'm setting up in css.

[swa66]

Does your html and CSS validate ?
[validator.w3.org...]
[jigsaw.w3.org...]