difficulty with horizontal list for navigation bar

[oboedrew]

I'm trying out a modified layout for my site www.oboedrew.com with a horizontal navigation bar, set up as an unordered list. What I'm aiming for is a list that is 700px wide (to match a div just above it on the page), with the far left and far right links at the left and right edges of the 700px list, and the two center links equally spaced. The text in the links will vary from page to page, so that I'm not linking to the page I'm on. So here's what I've got so far:

<div id="links">
<ul>
<li><a href="music.html">Music</a></li>
<li><a href="mailinglist.html">Mailing List</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="resonantreeds.html">Resonant Reeds</a></li>
</ul>
</div>

and...

*
{margin: 0;
border: 0;
padding: 0}

#links
{position: fixed;
top: 565px;
left: 60px;
width: 700px;
font-size: 25px}

#links ul li
{display: inline;
width: 25%}

#links a:link
{cursor: default;
text-decoration: none;
color: #fff}

#links a:visited
{cursor: default;
text-decoration: none;
color: #fff}

#links a:focus
{cursor: default;
text-decoration: none;
color: #fff}

#links a:hover
{cursor: default;
text-decoration: none;
color: #fff}

#links a:active
{cursor: default;
text-decoration: none;
color: #fff}


I thought that the width:25% would space the links out equally over the 700px width, and that having the margins and padding zeroed would mean the outer links are pressed up against the left and right edges of the 700px width. But it's not working out that way. Instead, the list is left-aligned with only normal word-spacing between each link. Any ideas how to pull this off? Ideally I'd like to have a round bullet (white, since it's against a black background, if that's possible) or some other sort of divider between each link, if that's possible. But right now when I try to add bullets with list-style-type, nothing shows up at all. Is this because I'm getting black bullets against a black background? Any other ideas on what I could do to achieve the look I want?

Thanks,
Drew

[Wickham]

Use the code below and see if it makes a difference. I put in background-colors temporarily so that you can see what is happening. I prefer to use float: left instead of display: inline; I find that it works better in most cases provided it is being used with block elements.

The 25% is not enough for Resonant Reeds so it uses two rows. You may need to set a class for each li tag with a different % width depending on the length of the link text.

The bullet can be shown. Firefox shows them with my code but IE7 does not! Normally bullets are outside the left side of the list item, so you need to bring them inside. See item 5 here:-
http://www.wickham43.supanet.com/tutorial/lists.html

I tried list-style-position: inside; but it didn't work as expected with a horizontal list although it works with a vertical list. An alternative would be to insert narrow extra li tags with just a bullet image between the list items (and adjust the 25% widths) or just put a bullet image in front of each text:-
<li><a href="contact.html"><img src="bulletimage.jpg" alt="image m"/> Contact</a></li>

CSS:-
*
{margin: 0;
border: 0;
padding: 0}

#links ul
{position: fixed; list-style-type: disc; background-color: green;
top: 5px;/*565px;*/
left: 60px;
width: 700px;
font-size: 25px}

#links ul li
{float: left;/*display: inline;*/ background-color: blue;
/*list-style-position: inside; didn't work as expected*/
width: 25%}

#links a:link
{cursor: default; background-color: purple;
text-decoration: none;
color: #fff}

#links a:visited
{cursor: default;
text-decoration: none;
color: #fff}

#links a:focus
{cursor: default;
text-decoration: none;
color: #fff}

#links a:hover
{cursor: default;
text-decoration: none;
color: #fff}

#links a:active
{cursor: default;
text-decoration: none;
color: #fff}