CSS Mystery

Attributes seem flaky

[RossWal]

Admittedly, this probably isn't the best coding practice, but I wonder why it doesn't work? The first CSS attribute shown below has no affect when specified on a table tag that's inside another table. It works fine on the outer table, or on td or tr tags in the inner table. The second css attibute works just fine on either the inner table or the outer table. This is on IE 6.

Can anyone help me understand why?

Thanks!

.wontWorkForInnerTable 
{ 
 BACKGROUND: #bfcff1 
} 

.willWorkForInnerTable 
{ 
 FONT-WEIGHT: bolder; 
 FONT-SIZE: 14px; 
 FONT-FAMILY: Arial, Helvetica "sans-serif"; 
 LETTER-SPACING: -0.03em 
} 

[Nick_W]

Yeah, CSS and tables is just weird ;)

Not sure about the specifics but, I know that they're a problem!

Nick

[SuzyUK]

It's workink OK in my IE6..

here's the code I used

CSS:
table.outer{
background-color: #009;
padding: 2px;
}

table.inner{
background-color: #ddd;
}

HTML:
<table class="outer" cellspacing="0">
<tr>
<td>first test cell</td>
<td>
<table class="inner" cellspacing-"0">
<tr>
<td>one cell inner table</td>
</tr>
</table>
</td>
</tr>
</table>

--------------------------------
the only thing I can think of is to check all your tags are closed, and that you have background-color, unstead of just background

Suzy

[RossWal]

Thanks guys. Suzy, I tried your suggestions to no avail. I'd did find that if I add a border into the css definition, it miraculously starts working, including the background color. Remove the border and it dies again. Since a border is actually in keeping with my needs, I'm good to go. But it's an oddity for sure.

Ross