Hi Val, I already gave you the answer to this and you aren’t closing the p tag before the table starts so effectively the table is inside the p and inherits the font-size.
Close the p element here:
<p>Excalibur 9-tray Model is only $30 more, is the same counter
size, and only four inches higher. So with the 2900, you get four more trays and <span class="red2 bold">NEARLY DOUBLE the DRYING SPACE</span>. <[B]br></p>[/B]
<table BORDER CELLS
Hi Paul - I apologize, there’s such a gazillion things to look for when converting!
>nothing explains why only this page has white space above the txtbox
I discovered it’s the .txtbox {zoom:1.0} causing that - http://www.sitepoint.com/forums/showthread.php?p=4720693#post4720693 - so I had to remove it.
thanks! - Val
Hi - this inheritance drives me nuts! I can see I need both these:
table.dat {font:0.8em/1.5 “Trebuchet MS”,sans-serif}
table.dat td, table.dat p, table.dat li {font:100%/1.5 “Trebuchet MS”,sans-serif}
so the font displays the same size in <td> and <td><p>
BUT how can I stop table.dat from reducing the font size in table th? which is a different font -
table.dat th {font:bold 1.1em/1.3 Helvetica,sans-serif; color:#f00251; background:#e5ffbf; padding:6px; font-size:100%}
If you look at the page, you’ll see that should be max .9 or so, not 1.1em. The font-size:100% doesn’t work. <th> is the row just under the images in the table at:
http://www.greensmoothie.com/1gs/dhd/compare.php
P.S. to Paul - thanks million for taking the time to show me table.test in http://www.sitepoint.com/forums/showthread.php?p=4719029#post4719029 
I didn’t know what to do with those ugly tables. I did what you said - left just rowspan + colspan in the html, and moved everything else to css. Luckily all data comparison tables have the same format (not like image divs which vary so wildly). Very grateful
P.S. to noonnope - your example re inheritance and specificity is great but I still took HOURS to figure out this:
table td.p10 {padding:10px}
<td class=“p10”>text</td>
.p10 {padding:10px}
<td><img>
<p class=“p10”>text</td>
One more question, does xhtml require thead and tbody in the html? I figure col + tfoot are optional?
thanks! - Val
One more question, does xhtml require thead and tbody in the html? I figure col + tfoot are optional?
thead and tbody are not required explicitly by XHTML, though know that even if you omit it, tbody is assumed by the browser (of course the browser will spend some time and energy on this “assuming” : )
tfoot is then also optional.
However it is a Good Idea to use thead and tbody… and if appropriate, tfoot (remember if you DO have a tfoot, it comes after thead, not after tbody… yeah funny that way).
Not sure what you mean by col.
Hi Stomme- thank you, I’ll add tbody and also thead (when there’s th’s).
About year ago, I wrote up a table template and it looked like this:
<table class=“dat” summary=“txt” >
<col class=“col4” span=“4”>
<thead>
<tr>
<th scope=“col”>txt</th>
<th scope=“col”>txt</th>
<th scope=“col”>txt</th>
<th scope=“col”>txt</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=“4”>txt</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope=“row”>txt</td>
<td scope=“row”>txt</td>
<td scope=“row”>txt</td>
<td scope=“row”>txt</td>
</tr>
</tbody>
</table>
.col4 {width:25%}
At the time I asked if there’s a way to tell the browser “this table is 4 cols + make them equal width” and the reply then was “no” (unless it’s been added to css3?)
so now I’m wondering if that <col> is needed? because the way I’m defining width is in the html:
<td class=“w25”>…
.w25 {width:25%}
which I know is a no-no to have presentational in the html… but it’s easiest for me since I already have all those .w’s in my css because I use them to position all my side-by-side image divs - e.g. higher up on that page you’ll see:
<div class=“txtpic”>
<div class=“flft cnt w30”>img</div>
<div class=“frgt lft w65”>txt</div> <!–or could be another img–>
</div>
Also is there a way to stop table {font} from affecting the font-size of table th {font}?
thanks! - Val
Ah… <col>
I’ve never used it. Mostly because
Mozilla gotz themselves confuzled by the specs way back in 1998 and so therefore is almost useless cross browser for most things… I guess width is one of the 4 things Mozilla actually works with though, so I guess you can use it.
I’ve discovered that I can set the widths of columns by setting the widths of the th’s on top… except IE7 wanted to limit to the width of content in the th (arg) and if content was longer/wider but couldn’t wrap (some really long Dutch word) then that didn’t work well either. But with short words, you could
.sometable thead th {
width: blah%;
}
assuming each colomn was headed by a th.
I dunno why you’d have a class on it though. You’ve got one on your table already.
.dat col {styles;}
The “span” is what the browser looks at, so css would only be good for things like background-color or something.
which I know is a no-no to have presentational in the html… but it’s easiest for me since I already have all those .w’s in my css because I use them to position all my side-by-side image divs - e.g. higher up on that page you’ll see:
<div class=“txtpic”>
<div class=“flft cnt w30”>img</div>
<div class=“frgt lft w65”>txt</div> <!–or could be another img–>
</div>
It looks like you are already comfortable with the non-presenataion riff-raff and confuzling names that come with grid systems… have you checked them out? They seem like something for you.
960 grid
Blueprint
etc
Also is there a way to stop table {font} from affecting the font-size of table th {font}?
Well, in general I don’t set fonts on things who don’t have their own text, except when I’m first setting fonts on the body.
So if most tables have a certain font size for th’s, td’s and captions, I’d just state them there.
No font setting on the table at all.
.dat th {
font for all th’s in the whatever with class of .dat;
}
or
table th {
fonts;
}
then
.specialtable th {
otherfonts;
}
and
table td {
fonts;
}
don’t even need “table” in front but might be more readable to you.
If you keep font settings on tables, and those font settings are % or em based, then know that setting is considered “100%” for children, so you’ll need to set higher numbers to get text to grow:
table {
font-size: .9em;
}
everything inside all tables is slightly smaller.
What is the default font-size for any td? 1em or 100%
and anything inside that td? also 1em or 100%… 100% of the table parent’s .9em though. So in both cases, the element thinks they are 1em or 100% but your eyes will see they are smaller than other elements on the page because the table shrunk everything first.
So what if you want a p in some td to be the equivalent of 1em?
It would have to be something larger than 1em.
So
table {
font-size: .9em;
}
td p.foo {
font-size: 1.2em; /or something/
}
1.2em is larger than the 1em it thinks it’s starting with (which, again, is really the parent’s .9em), so you try something bigger like 1.1em or 1.2em and now the text should not only be bigger than the others in the table but equal to (or maybe a bit bigger than) the text on the rest of the page (assuming that was all at 1em).
Since I suck at math, this is prolly why I don’t set fonts on boxes most of the time… I just set it on the particular element and then usually I don’t have to worry about parents and grandparents and percentages and calculations and weird stuff. Computers were invented to do the math junk FOR me.
Hi Stomme - thank you! I understand it now.
best, Val
Really? I read back what I wrote and it’s rather confuzling to me : )
Most of it only makes sense if I actually try it out in code.
But simply, no you don’t NEED col but if it’s helping you set your column widths, go for it
and to avoid “table” overriding your desired font settings of stuff IN a table, just don’t set fonts on the table itself, just its specific children. Then nobody has to override anyone.