Skip Evans wrote:
How can I set them so they fill 100% across the
table's TD cell, regardless of browser width, etc?
Technically, I don't think "Sliding Doors" is the approach you're
looking for as that's more about allowing the the tabs to expand to
accommodate changing font sizes, but I suppose it's a reasonable
starting point for the solution. You should note that by forcing the
tabs to all be in one line accessibility will be reduced because you've
reduced the upper limit to how much the fonts can be enlarged by the
user before the text will no longer fit in it's box. How much of a
problem this is will vary based on how much text is in the menu and how
wide the users screen is.
So, assuming your list structure looks like this:
<ul>
<li><a href="tab1">Tab1</a></li>
<li><a href="tab2">Tab2</a></li>
.
.
.
</ul>
You have two approaches to consider: will the tabs be equal widths or
will they be proportional? In either case the CSS will be almost
identical to the Sliding Doors' CSS, so I'll only point out the highlights.
For starters, I'm assuming that you don't know the exact pixel width of
the container (the <td> in your case) you'll need to calculate the
widths for your <li>s. For the equal widths case divide 100 by the
number of tabs to get the percentage.
For proportional widths it's a little more complicated. You'll need to
assign each <li> with an ID to allow you to assign a different width to
each one (if you don't need to support IE 6 or earlier you could use a
selector instead of IDs). You'll need to calculate the widths so that
the total is 100%. How to do that can be tricky. You could use
JavaScript to do so and just let those without js not have 100% width.
If you use a mono spaced font divide the number of character in each
tab by the total number (including spaces) to get the percentage. With
proportional fonts you have the problem of the width of each glyph will
vary from character to character, from font to font, and from platform
to platform. My advice is to pick one setup, measure it, and calculate
the percentages you'll need.
Note that in all cases you may need to reduce the percentages slightly
to avoid rounding errors causing a total to be greater than 100%.
Also, you'll probably want to add "{text-align : center;}" to your
anchors (unless you don't want the text centered).
On a side note, I generally recommend (as I'm sure many others on this
list would agree) not using tables for layout.
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
