Flexible vertical menu - html

Question

I'm working on this vertical menu. I need it to be flexible, so even longer text can be shown (as seen in the middle item). I want to keep the "padding" of the items, but I also want to increase the space between the lines for multi-line items (if I increase line-height, the distance from the edges gets bigger). How can I achieve that without increasing the "padding"? The images I use must have transparent background, so I can't use combination color-image (there is a gradient behind).
<div id="nav-list">
<ul>
<li><span class="button-middle">Button</span><span class="button-bottom"></span></li>
<li><span class="button-middle">Another button</span><span class="button-bottom"></span></li>
<li><span class="button-middle">The longest button in the world, even longer</span><span class="button-bottom"></span></li>
<li><span class="button-middle">Button</span><span class="button-bottom"></span></li>
<li><span class="button-middle">Btn</span><span class="button-bottom"></span></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;
}
Note: I can't use CSS3 because of its weak browser support.

Answer 1

I think the best you can do is add something like:
span.button-middle {
line-height: 1.2;
}
You could also decrease the line-height of the top and bottom of the button to compensate for the bigger middle section:
span.button-bottom {
line-height: 0.8;
}

Answer 2

Well... after hours of struggle I managed to solve it. I had to use different images, add one more span and use some relative positioning.
http://jsfiddle.net/uNCsp/
<div id="nav-list">
<ul>
<li><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Another button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Even longer button button button button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></li>
</ul>
</div>
CSS:
#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;
color: #000000;
text-decoration: none;
}
#nav-list ul li a .button-top {
background: url('http://i43.tinypic.com/r0urzp.png') top left no-repeat;
display: block;
}
#nav-list ul li a .button-middle {
position: relative;
top: 6px;
background: transparent;
padding: 0 0 0 5px;
display: block; /* IE7 bug */
line-height: 16px;
padding-bottom: 3px;
}
#nav-list ul li a .button-bottom {
width: 188px;
height: 10px;
background: url('http://i44.tinypic.com/15fqbti.png') top left no-repeat;
display: block;
}
#nav-list ul li a:hover .button-top {
background: url('http://i39.tinypic.com/334qfsz.png') top left no-repeat;
}
#nav-list ul li a:hover .button-bottom {
background: url('http://i41.tinypic.com/2ewinti.png') top left no-repeat;
}
There is a problem in IE7 (marked in the code), but I believe I'll solve that quickly.