CSS Menu: Fixed height

[~J~]

Trying to do a CSS menu for my site which I thought would be pretty easy.

In a nutshell I've got 3 images:

Left: 30px wide by 70px high
Middle: 10px wide by 70px high
Button: 110px wide by 70px high.

What I just can NOT do for the life of me is create an inline list and set the height equal to 70px NOR can I set the width of the button <LI> tags to be 110px wide!

Here's my CSS:

#menu
{
  width: 800px;
  height:70px;
}
#menu ul
{
 background: url('images/menu-m.png') center center repeat-x;
 float:left;
}
#menu ul li { 
 list-style: none;
 display: inline;
}
#menu li#left
{
 float:none;
 background: url('images/menu-l.png') no-repeat;
 width: 30px;
}
#menu li.button
{
 background: url('images/menu-b.png');
 width: 110px;
 color: #FFFFFF;
 float: none;
}
#menu a:link {  color: #fff;  text-decoration:none; }
#menu li#right
{
 float:none;
 background: url('images/menu-l.png') no-repeat;
 width: 30px;
}

and my HTML is like this:

  <div id="menu">
  <ul>
   <li id="left"></li>
   <li class="button"><a href="#">home</a></li>
   <li class="button"><a href="#">services</a></li>
   <li class="button"><a href="#">showcase</a></li>
   <li class="button"><a href="#">contact</a></li>
   <li id="right"></li>
  </ul>
  </div>

Is there any way to have the height of a CSS menu fixed at all?

 

[~J~]

Oh, you're a star!!! Actually used inline-block now as it's a horizontal menu, but thanks for that. Hardly got any hair left I've pulled that much out!!