Hi folks, new here. I've been using CSS with my current development project, and although mostly nice, it sometimes gets aggravating. Especially without a debugging tool. (Anybody know one?)

Here's an example. I'm displaying some tabular data, hence using a table. In fact I'm using two tables. Essentially I have a list of up to twelve items, and I'm showing them in two rows, but using completely separate tables. It looks pretty much like the top frame of this.

So, the first line should have a single-row table, followed by a right-arrow, centered vertically wrt the table. The second line should start with the right-arrow, followed by another table.

I only need it to work in IE6, but I'm checking it with Firefox too, to see if I'm following standards or just taking advantage of a quirk.

What's the right way to do this, with CSS, without resorting to using another table to hold everything? I need to get the arrows on the same line as the tables, but tables are like a div, and want to go on a line by themselves. I tried to set the style of the table to "display: inline;" or "display: table-inline;" but in Firefox this completely messes up the table - suddenly the table border is smaller than the cells!

So instead I set "float: left;" for the table in the first line, and "float: left;" for the arrow in the second line. That seems asymmetrical, but seems to work. It's not really semantically what I want - I want the table to be treated like a "big character" and just flow in the line.

Furthermore I can't make the arrow vertically centered wrt the table, except by adjusting the font size of the arrow.

Another annoying thing - I want to set the cell sizes using CSS, but both IE and Firefox ignore the width & height styles for td tags, instead only accepting the settings as attributes of the td tag. That violates XHTML 1.0 Strict, so I had to downgrade my page to XHTML 1.0 Transitional.

Here's a sample incarnation of the HTML, so you can look at it. Some of the stuff is filled in from a template (using Perl and HTML::Template). The resulting XHTML validates.

Thanks,
Lyle K.