Problem - table inherits border from parent

how can i stop it help appreciated

[fraggle]

i have a style given to the holding parent table. But every table i put inside inherits the border.
And i cant seem to stop it happening. Any ideas how i can stop it?
Style is... (for what its worth)

#content td {
border:1px solid #cccccc;
font-family:verdana;
font-size:11px;
color:#756474;
}

[bedlam]

Use the cascade!

/*
This can be read as 'an table cell inside another table cell contained in a table with the id "content" should have no borders'
*/
#content td td { border-style:none; }

-B

<unrequested advice>The problem will also simply vaninsh if you use tables only for data (and not, i.e. for layout)... :-)</unrequested advice>

[fraggle]

thank you

is it possible to call this inline too?

ps: yep i agree with off-topic comments (im editing someone elses code) :)
thanks again

[bedlam]

@ editing someone else's code: I feel the pain :-)

It's not possible to call a contextual selector inline, since a style attribute (e.g. style="border-style:none;") is taken by the browser to simply apply to the element that contains it. If you need to apply a style in some cases, but not other similar or identical cases, you should define a class in your css and just use that instead.

Incidentally, since the layout table's cells seem to be the source of the unwanted styles, and since (I assume...) there will be relatively few cells in the layout table, why not uses classes (or even better, ids) on them?

For example, a simple layout table could look like this:

CSS:

/* Styles for layout table: */
#layout { border-style:1px solid #ccc; border-collapse:collapse; }

/* Styles common to all layout table cells: */
#header,
#leftContent,
#mainContent,
#rightContent,
#footer,
#navigation { border:1px solid #ccc; }

HTML:

<table id="layout">
<tr>
<td colspan="3" id="header">Header</td>
</tr>

<tr>
<td colspan="3" id="navigation">Navigation</td>
</tr>

<tr>
<td id="leftContent">Left Content</td>
<td id="mainContent">Main Content</td>
<td id="rightContent">Right Content</td>
</tr>

<tr>
<td colspan="3" id="footer">Footer</td>
</tr>
</table>

Id selectors [w3.org] designate elements that are unique within a given document, plus have a greater specificity [google.com] than class selectors [w3.org] and so are usually used for structural elements on a page whether they be table cells or divs or uls. Because this method applies styles directly and specifically to the parts of the table that constitute the page's layout, tables inside the main table will not inherit their styles.

-B