Mark, Sorry, misunderstood the problem part. Essentially, your problem is not with creating the gradient effect per se, but with layout — specifically, getting .dummy to occupy the full remaining width (in which case the gradient goes from top left to top right of that element without any need for complicating that in itself).
If this is the case, painstakingly describing the constraints of your layout arrangement verbally might be a problem. Can you put the relevant code in jsfiddle.net or some similar service so we can have a look? If all those assumptions are correct, I would recommend using Nicole Sullivan's grids system without specifying unit width classes, and rely on the behaviour of .lastUnit to allow what you currently have as .dummy to occupy the full remaining width on that line. Example here: http://jsfiddle.net/FExyD/1/ …having said that my gradient seems to be breaking on IE7. Can't figure out why! Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 1 September 2011 16:27, Mark Richards <m...@date.net> wrote: > 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 <barney.carr...@gmail.com> > 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 [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/
