Graphic to separate links

I want to add a 2px wide graphic to separate the links in my menu, and successfully did that by adding a <li> between the menu items to the menu.php file that WebAssist generated:

<ul class="level-0" id="cssmw">
<li><span><a href="">Home</a></span></li>
<li><img src="/images/menusep.gif" width="2" height="41" /></li>
<li><span><a href="">About Us</a></span></li>
<li><img src="/images/menusep.gif" width="2" height="41" /></li>
<li><span><a href="">Strategies</a></span></li>
<li><img src="/images/menusep.gif" width="2" height="41" /></li>
<li><span><a href="">Learning Center</a></span></li>
<li><img src="/images/menusep.gif" width="2" height="41" /></li>
</ul>

But every time I update the menu, it obviously overwrites my manual entries. How can I either add a separator graphic, or how do I prevent my edited file from being overwritten?

Thanks.....

unfortunately, the Menu Writer wizard will not allow you to create a separator image, you will have to continue adding it manually after the fact. changes made after the fact will be lost when the menu is edited, there is no way to work around this behavior.

Marita,

Actually there is one way to do this without having to manually edit each time, but it would require you prepare the background and hover graphics for a customized menu. You could make both the background and hover menu images feature the 2 pixel wide "separator" on the far right side of the background. The way around keeping the last one from showing (since there are no more menu items after it) is real simple too. You just get the exact width of your entire menu bar - say it is 806 pixels. Since you know you don't want the last separator bar which is 2 pixels, you enclose the menu within a div that is 804 pixels wide (2 pixels less than the menu) and then set the overflow property to "hidden".

Regards,

Brian