I would like to remove the "pipe" character from my last item. Is there anyway to do it with css, or is this a javascript issue? I've tried to add a ".last" class to my last item, but it did not work.

html:

<div id="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Articles</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Links</a></li>
        <li class="last"><a href="#">Contact Us</a></li>

	</ul>
  	</div>

css:

#nav {
	width: 780px;
	height: 49px;
	margin-top: -1em;
}
#nav ul {
	list-style: none;
	background: url(../images/navbg2.png) repeat-x;
	height: 49px;
	padding-top: 0.7em;
	padding-left: .7em;
}
#nav ul li a {
	text-align: center;
	text-decoration: none;
	color: #FBF9F9;
}
#nav ul li {
	display: inline;
	font: 1em FontLogic;
	text-transform: uppercase;
	border-right: 1px solid #C96;
	padding-right: 2em;
	padding-left: 2em;
}
.last {
	border-style: none;
	border-width: 0px;
}

the ID will take priority over the class rule only.

#nav ul li.last {

So what are my options?

Replace your .last class with...

#nav ul li.last {
	border-style: none;
	border-width: 0px;
}

Shouldnt need to change your HTML

Yes.

it appears I missed out the word "use" from inbetween "... class rule only." and "#nav ul li.last {"

Awesome! Thanks guys