Help with Simple CSS Menu Problem?

I have pasted below the CSS and HTML code for a menu. The problem I am having is the #sidebar h3, has a background image(rounded corner). I also have my H3 text writing over top of that background image, which works fine except it writes it at the very top of the image, I need the text to show up in the middle or lower part of the background image. When adding the padding-top: 10px; it moves the text down to where I want it but it also seperates the .sidebarmenu borders leaving a gap between the bottom of H3 and the borders of the sidebarmenu? Any ideas how I can fix this. I know I could ad the text to the image in photoshop, but I would prefer to make it editable in the html

#sidebar 
{
	width: 175px;
	float: left;
	display: inline;
	padding-right: 10px;
}

#sidebar h3 {
	width:175px;
	height: 27px;
	display: block;
	overflow:hidden;
	background:url('images/sidebarhead.png')  no-repeat left;
	font-size:14px;
             [B][COLOR="red"]padding-top: 10px;[/COLOR][/B]}




.sidebarmenu {
	border-left: solid 1px #d7d7d7;
	border-right: solid 1px #d7d7d7;
	border-bottom: solid 1px #ebebeb;
	background-color: white;
	padding: 5px;
}



.sidebarmenu ul {
	margin: 0;
	padding: 0;
	list-style: square;
}


.sidebarmenu li{
	margin: 0;
	padding: 2px 0 0 0px;
	font-size:14px;
	border-bottom: 1px solid  #CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	
}

Code (markup):

  

 <div id="sidebar">
<h3>TITLE SIDEBAR </h3>
						
<div class="sidebarmenu">			
<ul> 
      <li><a href="../index.html">Link</a></li> 
       <li><a href="../index.html">Link</a></li>
       <li><a href="../index.html">Link</a></li>
 </ul> 
</div>			

HTML:

 

Try adding
line-height: 27px
to your #sidebar h3

 

Awesome it worked. Thanks!!

 

good jwitt98