Table rows not evenly distributed in Chrome

[pepblast]

Hi,

I am using nested tables in order to create a recursive tree-like effect. I got it to look how I want on IE 8, and it looks almost identical in Firefox. However, Chrome is not distributing table rows evenly. It seems to make the first row in a table a minimum size, and then the second row a maximum size.

I'm looking for some css property that will help this to work across all three browsers, and I'm also open to another way of doing this - (instead of nested tables) - but I did spend weeks getting it to look this way before I decided I wanted to try tackling Chrome, and have been unable to figure it out.

I have a fully working application that you can look at to see what is going on.

Website:

http://banyan.robestone.com/species/search.tree/nKiDb0DbYEWA

The style sheet I use is located here

http://banyan.robestone.com/species/style/species.css

[drhowarddrfine]

Change this line:
<html xmlns="http://www.w3.org/1999/xhtml">

to this:
<html>
The first is for XHTML only but you are using a HTML doctype.

It doesn't matter how it looks or works in IE till you get it working in a modern browser first. Right now you have 181 HTML errors and 40 CSS errors. Validate for those lists and come back when they are fixed.

[pepblast]

Okay, I have fixed all the html and css validation errors. I used the w3c online validators to check this. See Html validator results and CSS Validator results

So I'm taking this seriously you can see.

My goal is still to figure out what css style or html patterns I should use to get Chrome to render the way Firefox is rendering.

[pepblast]

I've created a much simplified page to demonstrate this issue, which should make it much easier for someone to see what's going on in the html. You can still clearly see how Firefox and Chrome render this completely differently.

http://jacob.jrobertsons.com/FirefoxVsChromeRows.html

I have been sure to check that this validates with zero errors in both html and css.