Hey everybody:

I'm working on a site - and this page is an example of many other pages I'll create. My main question/issue is why is a particular table stretching as tall as it is? Specifically, I'm referring to the innermost table - the one that lists team rankings/data versus opponents. I've been able to rectify the problem (on some browsers) with an #ID tag for the table, along with a css rule setting the corresponding <td> element to: height: auto; I prefer to use classes since the data is broken into units of ten and there's a sepearate table for each of these data sets. When I try to use classes or anything besides: #tableID, #tableID td { height: auto; } the table blows up in height. I've really never experienced anything like this.

http://teamrankings.com/beta/nfl.php
(I realize there are a number of errors with it - it's in progress).

RELEVANT CSS:
http://teamrankings.com/beta/css/teamrankings.css

I've looked around on the web and there are so many problems with table height in general, it's hard to sort through that stuff and figure anything out. I'm wondering if anyone knows any reason why the table is behaving like this in the first place, it seems to me to be very odd behavior.

Thanks for everything.
Let me know if I need to post additional information.

Your problem is here:

/*////////////////MAINCONTENT INFO////////////////*/

#mainContent {
width:760px;
margin-top:18px;
}

#mainContent td {
border:1px solid silver;
/* height:600px; take this out and it works fine*/
}

thank you. that was silly of me.

NP. It happens to everyone...
My first response was going to be: "Go get a cup of coffee and let it go for a while... Then start looking at it from the very basics."

I bet you would have found it!