Hi,
I guess I wasn't clear in my original email. I plan to use CSS3 for the
gradient, and possibly IE filters to make this work in older IE. My problem
is with the layout. I want the gradient to start at the right edge of the
menu items and go until the right edge of the parent.
<div class="nav">
<table>
<tr>
<td>Menu item 1</td>
<td>Menu item 2</td>
<td>Menu item 3</td>
</tr>
</table>
</div>
If I knew that the width of the menu items was, say, 37% of the .nav parent,
I could do
.nav {
background-image: -moz-linear-gradient(left, #FF0000 37%, @c2 100%);
}
But I don't know the width of the parent of the table.
If I had a dummy table cell
<div class="nav">
<table>
<tr>
<td>Menu item 1</td>
<td>Menu item 2</td>
<td>Menu item 3</td>
<td class="dummy"> </td>
</tr>
</table>
</div>
I could do
.dummy {
background-image: -moz-linear-gradient(left, #FF0000 0%, @c2 100%);
}
But I want the text in the main table cells to be on a single line if
possible, and the cells to shrink-wrap to that text as much as possible. I
don't know how to size the dummy cell properly, because the number and size
of menu items is variable.
I am opposed to using any kind of image file at all, both <img> and normal
background-image.
Mark
On Thu, Sep 1, 2011 at 10:23, Barney Carroll <[email protected]>wrote:
> Mark,
>
> You can use Microsoft's proprietary filters property to achieve
> gradients using a similar syntax. As ever, CSS3please.com is the best
> resource:
>
> http://css3please.com#box_gradient
>
> Regards,
> Barney Carroll
>
>
______________________________________________________________________
css-discuss [[email protected]]
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/
