Горизонтально меню с разделителем пуктов картинкой

[alfaq]

Здравствуйте, суть проблемы:

есть меню

<div class="mainmenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

его стиль

.mainmenu {
height: 50px;
background-color: #003362;
border-radius: 20px 20px 0 0;
}

.mainmenu ul {
padding-left: 20px;
margin-top: 0;
}

.mainmenu  ul li{
list-style: none;
display: block;
float: left;
padding: 0 15px 0 15px;
height: 50px;
background: url(../images/tab.jpg) 0 50% no-repeat; /* картинка разделитель*/
}

.mainmenu  ul li a{
color: #FFF;
font-size: 16pt;
}
.mainmenu  ul li:first-child{
background: none;
}

в результате получается

как видно на изображении проблема опустить сами ссылки ниже (при этом, что бы фон-разделитель остался на своём месте)

пробывал так

.mainmenu  ul li a{
color: #FFF;
font-size: 16pt;
padding-top: 15px
}

может есть какое-то другое решение?

Edited June 30, 2012 by alfaq

[Catherine]

Добавьте к li

line-height: 50px;

Пример

[alfaq]

Catherine, спасибо, всё оказалось так просто!