CSS: remove separator on the last and first item

Question

I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?

Thank you

edit: sorry, I thought it was descriptive enough. Here is the code:

<div id="menu">
       <a href="#"><div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/profil.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div></a>
 </div>

IE6 incompatibility is OK (thankfully).

Answer 1

The following rule will apply to all .menu_item elements that follow another .menu_item element:

.menu_item + .menu_item {
  border-left: 2px solid black;
}

Answer 2

The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.

<ul class="menu">
  <li class="first">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin: 0 1px; }
  .menu .first { margin-left: 0; }
  .menu .last { margin-right: 0; }
</style>

You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.

OR, you can use 2px margins on the right side instead and go with only one additional class:

<ul class="menu">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin-right: 2px; }
  .menu .last { margin-right: 0; }
</style>