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.
> 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
> 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
> 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
> I have a feeling I've missed something similar.
> How can I have the yellow box of the menu match the width of the
> 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.
or not, as it breaks in Firefox 2.0.0.x, and that is a bug (it works
correctly in Gecko nightly builds) .
Safari/Webkit, Konqueror and Opera 9 are happy though.
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.
 second row of the Acid2 test if you want all the details.
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/