A good direction would be to use a separate list item as a placeholder for each divider like so:
#topbar { width: 100%; background: #f8f8f8; margin: 0 auto;}
#topbar > nav { width: 980px; overflow: hidden; margin: 0px auto;}
#topbar > nav > ul {list-style-type: none; margin: 0; padding: 0;float:left;}
#topbar > nav > ul > li {display: inline;list-style-type: none;}
#topbar > nav > ul > li > a:hover { text-decoration: underline; }
<div id="topbar">
<nav>
<ul>
<li><a href="/member">My Account</a></li>
<li class="divider">|</li>
<li><a href="/member_wishlist">Wish List</a></li>
<li class="divider">|</li>
<li><a href="/tracking">Order Status</a></li>
<li class="divider">|</li>
<li><a href="/category/customer-service">Customer Service</a></li>
</ul>
</nav>
</div>
That way you can clean up your current CSS and have granular control over the divider, be it an image or text. Also notice that I removed the float from <div id="topBar">
and <ul>
. You only need a float in your CSS for the <ul>
. I also removed the #container > header >
from your CSS as it is superfluous CSS. See working example here: http://jsfiddle.net/QhCeH/