On Jun 8, 2007, at 4:19 PM, Dave M G wrote: > On the following page, I have a menu that is made up of <li> > elements in > a vertical flow. > http://nihongode.jp > > The vertical flow of text was acheived by cheating a little. Each <li> > is only 1em wide, forcing each character to appear below the one > before. > > All I want to achieve is to have the menu be only as wide and high > as it > takes to fit the menu items. > > [...] > > But the width is nowhere near as easy. Setting a minimum width > makes the > menu expand across almost the entire page. Setting a fixed width > doesn't > have any connection to the number of menu items, so it won't expand or > contract to contain them. > > I tried setting the width to an size based on em, hoping that would > cause it to expand proportionally if the text size was adjusted up or > down. But, although it does scale with the text, it doesn't do in the > right proportions, causing the text to move out of alignment with the > graphic. > > I have a feeling I've missed something similar. > > How can I have the yellow box of the menu match the width of the > textual > menu inside, as determined by the number and size of the menu items?
1. you work from different em values. An em-width on the div is different than a em-width on the <li>. 2. mixing pixels and ems is complicating things. 3. you make the <ul> partly empty by using a negative left-margin a. I set the font-size on the div (#verticalMenu), and set the ul and the li to inherit that. b. I removed the width on the div (aka width:auto), it is a floated div, it should shrink-wrap to the content. c. I gave the <ul> a padding-left equal to the negative margin-left, making sure that the box for the <ul> has the required computed width to keep the div open. d. enjoy. or not, as it breaks in Firefox 2.0.0.x, and that is a bug (it works correctly in Gecko nightly builds) [1]. Safari/Webkit, Konqueror and Opera 9 are happy though. so. b1. add a width back to the div. 7.5em seems to work fine. Adjust to taste. Safari/Webkit, Konqueror and Opera 9 are still happy. IE 6 & 7 might be more happy. Not tested. [1] second row of the Acid2 test if you want all the details. Philippe --- Philippe Wittenbergh <http://emps.l-c-n.com> ______________________________________________________________________ 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/
