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: