list w/ images as seperators, how to make last li with no seperator?

[NathanielB]

Hi,
I am wondering how I would go about properly creating a list, where images are the separator, and not have either the leading or trailing last div with that image separator.

I thought of creating basically an ending id or glass where the background attribute is set to none, and associating that with the respective li element, however it did not work.

My CSS Code is as follows:

#topmenu ul {
list-style:none;
margin:0;
padding:0;
}

#topmenu li {
float:left;
background:url(../images/topmenu_seperator.gif) center right no-repeat;
padding:0px 4px;
}
#topmenu li a {
color:#ACC61C;
text-decoration:none;
}

#topmenu li a:hover {
color:#ACC61C;
text-decoration:underline;
}

.last {
background:none;
}

and my html is as follows:

	<div id="topmenu">
    	<ul>
        	<li><a href="#" title="TITLE">Title</a></li>
            <li><a href="#" title="TITLE">Title</a></li>
            <li><a href="#" title="TITLE">Title</a></li>
            <li><a href="#" title="TITLE">Title</a></li>
            <li class="last"><a href="#" title="TITLE">Title</a></li>
        </ul>
    <!-- #topmenu ends -->
    </div>

any insight is appreciated

[whiteboxer]

I think its a specificity issue. Try using:

#topmenu li.last {
background:none;
}