distribute columns evenly

[webmaker]

I have a table that is a menu containing 10 items horizontally. I want
it to be able to stretch across the screen sizing itself appropriately.
I have each item in a separate table cell and I was hoping I could have
the cells spaced evenly-somehow. I tried adding 10% to the CSS, but it
is still spacing them strangley. The longer words have bigger cells of
empty space and the smaller words have no extra width at all.
I'm working in IE6, but want this to work in netscape too.
Example:
fox elephant dog cat hippopatamous fish

I'm using:
<td><div class="cell"><A class="nav">fox </a></div></td>
<td><div class="cell"><A class="nav">ele phant</a></div></td>
<td><div class="cell"><A class="nav">dog </a></div></td>
<td><div class="cell"><A class="nav">cat </a></div></td>
<td><div class="cell"><A class="nav">hip popatamous</a></div></td>
<td><div class="cell"><A class="nav">fis h</a></div></td>

with CSS:
div.cell {width: 100%; text-align: center;}

did some experimenting with:
td a.nav { width: 100%;text-align: center;}
but the div seemed to space a little better

I put width 100% becasue in looking at the design view in Homesite
(which I use only to figure out stuff like this) the <a> or <div> was
around the word but the cell was much larger. This fixed the problem of
the much bigger cell around the big word.

The larger words are still padded a bit in the cell. I would like to
see that fixed and also a way to put even spacing between each
cell--using a cell with a different style? some kind of dynamic width?
Thanks for your help!
Lisa

[Jukka K. Korpela]

"webmaker" <li******@yahoo .com> wrote:

I have a table that is a menu containing 10 items horizontally. I want
it to be able to stretch across the screen sizing itself appropriately.
The obvious approach is to set the table width to 100% and the column
widths to 10%. If some cell contains a word that is too long to fit into
that 10%, browsers expand that column and shrink the others, and this is a
fairly hard problem. But is it relevant in your case?

I don't see why you are using extra <div> markup. And setting width: 100%
for a <div> inside a <td> simply tells the <div> to use the full width of
the cell (column).
I'm using:
Please post the URL. As far as I can see, the CSS code in the snippets you
posted does not affect column widths and should be expected to affect them.
td a.nav { width: 100%;text-align: center;}
This makes an <a> element occupy the available width, in this case the
cell's width. This might be nice, but it does not set the cell width.
The larger words are still padded a bit in the cell.

No wonder, since default cellpadding is typically nonzero and you don't
seem to be changing that. On the other hand, padding (at least left and
right padding) tends to be a solution rather than a problem. You might wish
to set in CSS, though, instead of the coarse cellpadding=".. ." in HTML.
(E.g., th, td { padding: 0.1em 0.25em; })

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[webmaker]

thanks, Jukka. It was the cell padding. I always change it when
chopping up graphics, but didn't even think about it with text.
Lisa