On Thu, 23 Aug 2007, Les Mizzell wrote: > I just got asked this by a client. I don't think it's possible. > What they're looking for is a drop down list showing different versions > of a product with several attributes all in equal width columns.
In practical terms, it isn't possible, but you can achieve something similar by using other kinds of input fields (form controls). > Kinda like: > > Item # Size Color Radius > ---------------------------------------------- > <select> > <option> 123A 12" Green 2' </option> > <option> 123B 14" Red 7' </option> > <option> 123C 15" Blue 9' </option> > </select> > > No way - right? Since the option element has plain text as its content, by HTML specifications, there is no way to apply different CSS styling to its different parts, e.g. to make part of it start at a specific horizontal position. Pseudoelements might in theory change this, but there's nothing to look for in that direction. You could "hand-tabulate" the content as above, using no-break spaces instead of normal spaces, and set the font in the select elements to a monospace font. That way, you could get tabular-looking appearance much like you did in your email, except that you needed extra operations. (Using white-space: pre should make even normal spaces non-collapsible, but it does not seem to work for select elements, at least on IE 7.) So what's left ia a different design, where you put the data in a table (after all, it is tabular data, isn't it?) and make the first column of the table contain radio buttons. The user would then click on a radio button, rather than select from a dropdown list. For an example and some notes on this approach, see http://www.cs.tut.fi/~jkorpela/forms/choices.html#select-inflex -- Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
