[RESOLVED] <li>'s and <ul>'s (floating the <li>'s and borders on the <ul>)

[DJRobThaMan]

Hi,

Another quick question (or at least hopefully not too difficult).

In the same project that I'm having this unrelated issue (http://www.webdeveloper.com/forum/showthread.php?t=177218), I am trying to fancy up my main menu a bit and can only get it about 98% correct.

My code looks something like this:


<ul id="main">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
...
</ul>



#main
{
border-bottom: 1px solid #9a8d66;
list-style: none;
height: 1.2em;
margin: -20px 0px 0px 75px;
display: table;
}

#main li
{
float: left;
margin-right: 0.5em;
height: 1.2em;
display: table-cell;
}


What I want is for the menu items to be displayed side by side and for there to be a single border underneath them that is the same width as the sum of all the items. This I have achieved with the above code.

BUT

If I resize the text with the browser until it wraps to more than one line and then size it back to a smaller size, no matter how I size it, the text never goes back to being on the same line. It remains on 2 or 3 or however many were the most lines that the test wrapped to.

Does anyone know how I can tweak the above code (or even completely overhaul it) to fix the situation so that after the text wraps and I size it smaller it goes back to one line.

Thanks

[KDLA]

If I resize the text with the browser until it wraps to more than one line and then size it back to a smaller size, no matter how I size it, the text never goes back to being on the same line. It remains on 2 or 3 or however many were the most lines that the test wrapped to.

It works fine for me in Fx and IE6, using just the code you provided. Can you send a link to the page? It may have to do with something else in the page.

***edit -- it has to do with the combination of the top margin and the table/table cell display. I disabled the margin at first to get the links to appear in the window. But, when I enabled it again, the behavior did occur.

I suggest you use "block".

[DJRobThaMan]

I wish I could use "block" for the display property. Or maybe I should say I wish I knew how to use it and get the desired effect.

If I use "block" then I'm faced with 2 scenarios.

1. I don't fix a width and the border goes across the entire screen.

2. I do fix a width and the length of the border never changes.

I definitely do not want scenario 1.

I'm not sure if scenario 2 is what I want either, but I'll talk it out and see if I've grasped the situation.

I have defined the font to be used (freesans, which most people don't have, argghhhh, or verdana) and defined the general font size for the page (16px). Assuming freesans and verdana take up the same horizontal space (I'm not sure this is a correct assumption) I can then define the size of the external <ul> element to be 200px, for example, and then the border will start where the first item starts and end where the last item ends. But, when font size is increased or decreased the size of the <ul> remains the same. So smaller text means now the border is too long, and larger text means that even if there is horizontal space remaining on the screen, it will not be used by the text.

I suppose, that this scenario (2) is not the worst that could happen, and I wouldn't die if this is what I ended up with (although I do shudder when I think about the empty space over that border at smaller font sizes). But it all hangs on the assumption that all fonts are created equal and freesans, verdana and any other font that may be the default on someone's system take up the same amount of horizontal space. What do you think? Do they?

[Centauri]

If you also float the <ul>, then its width will be dictated by the contents.

[DJRobThaMan]

Simple but effective. Thanks a milllion