make horizontal list items same width?!

[gBay]

hi all,
i have an unordered list which is going horizontal. how can i make each list item the same width, so i can apply a background colour and make them look like buttons (which are the same width!).
heres my code:
#menu2{
width:500px;
}
#menu2 li{
display:inline;
}
#menu2 li a {
height: 24px;
text-decoration: none;
}
i think its something to do with the li being inline? if so, is there anyway around this?
many thanks
- D

[puco]

Try floating them to the left/right and then assigning them the desired width.

[sygad]

width doesn't work when they are inline, you have to float them to assign the width attribute, a right pain is the ****.

also be aware that when you float them you are taking them out of the normal document flow, this means that the content immediatley following the menu MAY jump up to an unexpected place next to the menu, if your menu spans 100% width then the content below it will have no choice but to go underneath.

If the menu doesn't fill 100% width and the content jumps up next to the menu, you can fix this with a bit of HTML+CSS hack, straight after the menu code place the following code

<p class="clearBoth">&nbsp;</p>

and define the clearBoth in CSS as follows

.clearBoth {clear:both}

this forces the content below the menu to "clear" anything that is floated on its left or right hand sides.

If the spacing is too much then get rid of the &nbsp; and play with the margin value

[gBay]

hi sygad,
great, thanks, im almost there. heres my code now:
#menu2{
width:700px;
}
#menu2 li{
width:100px;
display:block;
float:left;
background:#ccc;
border-right:#fff 1px solid;

}
#menu2 li a:link {
text-decoration: none;
}
note that ive put a display:block; in there. i know that by default a li is a block level element, but the cursor only changes to a hand when it rolls over the text as opposed to the 'button'. so ive tried to force the li as a block so when the users cursor hovers over the li (all 100px of it), then the cursor turns to the pointer.
any advice?
thanks
- G

[gBay]

hah! dont worry, got it snorted. my code now is:
#menu2{
width:750px;
}
#menu2 ul{
list-style:none;
}
#menu2 li{
float:left;
background:#ccc;
border-right:#fff 1px solid;
}
#menu2 li a {
text-decoration: none;
padding:5px;
width:100px;
display:block;
}
#menu2 li a:hover {
text-decoration: none;
padding:5px;
width:100px;
display:block;
}
- G

[sygad]

looks about right to me, most of the work is actually done on the <a> part of the <li> the div container is just that, a container, the ul is a container for the li and the li contains the a which is the bit you are really concerned with anyway.

Of course as you drill down there are some css attributes which are only applicable to each stage "container", it starts getting really messy when margin and padding are added at the wrong place.

Nice that you got it sorted