css: table height won't cooperate

Question

Hi,

I can't make a table I've 'embedded' in another div arbitrarily tall/short:

#header table.rates { float: left; width: 210px; border: 1px solid black; border-collapse: collapse; padding:0; margin: 5px; font-family: Verdana, Helvetica, Arial; font-size: 10px; }

#header { clear:both; float:left; width:100%; border-bottom:1px solid #000; background: #9c9; padding-top: 10px; padding-bottom: 10px; font: small-caps 40px/40px "Times New Roman", serif; color: #282; }

And in the html it's <div id='header'>...<table class='rates'>...

The table vertically expands the header div and no amount of tinkering with the tr, td or table elements will get it to cooperate. What am I missing?

Thanks,

Lille

Answer 1

Sorry for the cyber-perturbation here folks, the problem was with

#header { font: small-caps 40px\40px "Times New Roman", serif; }

Modifying the line to font: small-caps 40px "Times New Roman", serif; allowed me access to my table's height properties, as desired.

Lille

Answer 2

CSS:

.rates { float: left; width: 210px; border: 1px solid black; border-collapse: collapse; padding:0; margin: 5px; font-family: Verdana, Helvetica, Arial; font-size: 10px; height:500px; }

#header { clear:both; float:left; width:100%; border-bottom:1px solid #000; background: #9c9; padding-top: 10px; padding-bottom: 10px; font: small-caps 40px/40px "Times New Roman", serif; color: #282;}

Height at the end of .rates should set the height.

HTML

<div id="header">
<table class="rates" bgcolor="#000000">

</table>
</div>

Added bgcolor to be able to see the table