Menüliste -> Trennlinien positionieren sich snicht wie gewollt

Hallo,

habe ein menü;

<ul>
   <li><a href="#">Aktuell</a></li> 
   <li class="trennlinie"></li>
   <li><a href="#">Kollektionen</a></li> 
   <li class="trennlinie"></li>
   <li><a href="#">Specials</a></li> 
   <li class="trennlinie"></li>
   <li><a href="#">Sale</a></li> 
   <li class="trennlinie"></li>
  </ul>

CSS:

#header-links ul {
text-align: right;
margin: -70px 60px 0px 0px;
}


#header-links li {
list-style: none;
display: inline;
padding: 4px;


}


#header-links li.trennlinie {
list-style: none;
display: inline;
background-image: url("images/trennlinie_header.gif");
background-repeat: no-repeat;


}


#header-links a {
vertical-align: top;
font-size: 19px;
color: #A6A6A6;
}


#header-links a:hover {
text-decoration: underline;
color: #FFF;
}

Problem: die trennlinien sollen sich nach unten verlagern.

es sieht so aus: http://img255.imageshack.us/i/menueeig.jpg/

soll aber so aussehen: http://img809.imageshack.us/i/menuen.jpg/

wie mache ich das? (kann die seite leider nirgends hochladen, hoffe, es geht auch so)

danke und gruß
mirko

Andersrum mit den Bildern.

// Hab es schon mit margin-top versucht, ohne Erfolg.

Versuche es mal mit background-position

Hm, das bringt nichts.

---> http://politik-einfach.de/Coding-Aufgabe…onlineshop.html

Mittlerweile habe ich es hingekriegt (durch absolutes Positionieren), nur der schei* IE7 macht nicht mit.