Posted by z on 11/06/06 19:07

Ben C wrote:

> On 2006-11-06, z <z> wrote:

>> I was trying something like this but it isn't working. The border
>> appears to the right of everything.
>> ul#nav {
>> border-bottom: 3px solid green;
>> }
>
> It's because the <li>s inside the <ul> are floats, so they don't
> contribute to the <ul>'s height, which is auto and computes as zero. The
> border sticks out a bit at the right, for the rest of its length it's
> obscured by the "Menu Option" boxes.
>
> If you make ul#nav also float: left, it becomes the "block formatting
> context root" for the <li>s and so grows in height to fit them, resulting
> in the border being in the right place.
>
> This may not be the best solution in your case though. You'll need to
> post a link to your current version.
>
>> My version has all the borders removed, with grey on white text for
>> everything.
>>
>> Complicated... I'm also trying to put a list-style-image next to only
>> the
>> top-level items. Haven't been successful with that either.
>
> It should work, but it's up to browser exactly where the list item image
> goes. Usually a few pixels off to the left.

You are a CSS genius. The float:left works -- although the rollovers cover
up the border. I am getting inspired to study more advanced CSS.

I'll put a working version online and post the link.

Thanks

[Back to original message]