Hello folks,
The site I maintain currently has its navigation in a table (don't ask):
<div class="nav">
<table>
<tr>
<td>Menu item 1</td>
<td>Menu item 2</td>
<td>Menu item 3</td>
</tr>
</table>
</div>
The styles currently put .nav at 100% width with a background-color, and
apply some borders, etc, on the TDs. The currently selected item has a bg
set as well.
This results in a display that looks like this
|[Menu item 1][Menu item 2][Menu item 2]-------------|
where ----- represents the solid be for the .nav.
We use a table because we need IE7 support and we want the table to take up
one line, with evenly-distributed items (the text for each item, and the
number of items, is variable for each page).
What I'd like is to make it so that to the right of the table, the ------
space is filled with a gradient. So if the table was wide enough to fill the
parent, there'd be no gradient showing, but if it's not wide enough to fill
the parent then from the edge of the table there is a gradient from the .nav
bacground-colour to white (or transparent).
I tried putting an empty table cell and forcing it to have a large width,
but that causes the menu item text to wrap. But I can't just force it to
no-wrap because if the table is wide enough then I need it to wrap.
I'd like to avoid putting an image in (actually if that's the only way then
it's not going to happen).
Any suggestions?
Mark
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
