[CSS] Nakładanie obrazków Opcje

[boro11]

Witam!

Mam taki kod menu:

[HTML] pobierz, plaintext 
<div id="menu">
 
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Sites</a></li>
		<li><a href="#">Register</a></li>
		<li><a href="#">Login</a></li>
		<li><a href="#">Helpdesk</a></li>
		<li><a href="#">Forum</a></li>				
	</ul>
 
</div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#menu {
	margin-left: 360px;
}
 
#menu ul {
	position: absolute;
	float: left;
	list-style-type:none;
}
 
#menu li {
	display: inline;
}
 
#menu a {
	background: url(../images/button_background.png);
	width: 128px;
	height: 85px;
	display: inline-block;
	text-align: center;
	float: left;
	color: #fff;
	font: 16px "Noto Sans";
	text-decoration: none;
	vertical-align:-50px;
}
[HTML] pobierz, plaintext 

Wyświetla się prawie tak jak ma, ale jest za duży odstęp pomiędzy obrazkami ponieważ mają one nie regularny kształt (kopnięty kwadrat) i odstępy są za duże, w projekcie na siebie zachodzą:



A ja póki co stworzyłem coś takiego:
http://v5.refbackbank.com/

Drugie pytanie, jak opuścić tekst(a href) aby był na takiej wysokości jak chce?