html - 柔軟な縦型メニュー

Question

私はこの垂直メニューに取り組んでいます。より長いテキストを表示できるように、柔軟にする必要があります (中央の項目に示されているように)。アイテムの「パディング」を維持したいのですが、複数行のアイテムの行間のスペースも増やしたいです（行の高さを増やすと、端からの距離が大きくなります）。「パディング」を増やさずにそれを達成するにはどうすればよいですか? 使用する画像の背景は透明でなければならないため、カラー画像の組み合わせは使用できません (背後にグラデーションがあります)。

<div id="nav-list">
<ul>
<li><a href="#"><span class="button-middle">Button</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">Another button</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">The longest button in the world, even longer</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">Button</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">Btn</span><span class="button-bottom"></span></a></li>
</ul>
</div>

CSS:

* {
border: 0;
margin: 0;
padding: 0;
}

#nav-list {
width: 195px;
}

#nav-list ul {
list-style: none;
}

#nav-list ul li {
display: block;
margin: 5px 2px 0 5px;
font-size: 13px;
}

#nav-list ul li a {
display: block;
background: url('http://i41.tinypic.com/20h4hvp.png') top left no-repeat;
padding-top: 10px;
line-height: 10px;
color: #000000;
text-decoration: none;
}

#nav-list ul li a .button-middle {
width: 183px;
background: #b6b6b6;
padding-left: 5px;
display: block;
}

#nav-list ul li a .button-bottom {
width: 188px;
height: 10px;
background: url('http://i39.tinypic.com/2mrd343.png') top left no-repeat;
display: block;
}

注: ブラウザーのサポートが弱いため、CSS3 を使用できません。