Sent by Michael Landis on 28 October 2003 04:04
Doug wrote:
> I want to make an unordered list be a set of vertical "buttons",
> easy enough. But I want the list items that are narrow in width be
> half as wide as list items that are wide. I have worked for 3 full
> days trying to figure this out, it just won't do it.
>
> Look at this: http://www.dispatch.com/list-menu-test.html
>
> In Netscape 7/Win and Safari it breaks after Item 7, and on IE6/Win
> it kind of works, but with an "accordian" behaviour.
>
> I also wish there was a way to do this just using one list, not many
> as is here.
Try this:
http://home.earthlink.net/~landisdesign/halfList.html
Basically, every single list item is floated here. Since the list is
contained in a single width-constraining div, the floats stack next to or
atop each other as needed. I'm guessing the accordion effect was because
some items were floated while others weren't, and none of the floated items
had defined widths -- which can cause some issues.
I placed the widths on the floats, ensuring that all browsers will know
what to do with them. I then remove the widths from the links that are
block elements, and let the link elements do what blocks do -- take up the
space they're given.
The full-length elements have no problems floating, because floats will
keep pushing underneath each other if there's no room. (This happens to
also be a handy way to circumvent IE's white-space-between-list-items-gap
bug.)
(It's getting late over here, so I've got to cut the explanation short, but
hopefully you can see what is going on here...)
MikeL
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/