Imagem não alinha

Eu criei um menu utilizando UL LI, e um dos primeiros itens inseri uma imagem, todo esse conteudo esta dentro de um DIV chamada MENU, eu gostaria que deixar essa imagem com TOP 0px e LEFT 0 px, mas não consigo deixar desse jeito, oque pode estar errado ?

Deveria ficar assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img845.imageshack.us/img845/3623/cc47.png&key=c33df0e369c7ca443f2fe256626319887e1bf49ef489faf95843cd35af29b008" alt="cc47.png" />

Mas esta ficando assim

/applications/core/interface/imageproxy/imageproxy.php?img=http://imageshack.us/a/img5/4755/52tu.png&key=10da15d398db65ce255e5c73c860f04bf407e7448f6ca46e5225c8fab5021112" alt="52tu.png" />:

Meu código:

CSS

#menu {
	position: absolute;
	background-color:#303032;
	z-index: 10000;
	height: 70px;
	left: 0px;
	top: 0px;
}

#menu ul {

	list-style: none;
}

#menu ul li {

	display: inline;
	color: #FFFFFF;
	font:10% Tahoma;
	font-size:medium;
}

#menu ul li a {

	color: #FFFFFF;
	text-decoration: none;
}

HTML

<div id="menu">
<ul>
<li><img src="img/logo.png" style="vertical-align:middle; left:0px; top:0px;" /></li>
<li><img src="img/space.png" style="vertical-align:middle;" /></li>
<li><a href="javascript:scroll('$inicio');">Inicio</a></li>
<li><img src="img/space.png" style="vertical-align:middle;" /></li>
<li><a href="javascript:scroll('#agencia');">A agência</a></li>
<li><img src="img/space.png" style="vertical-align:middle;" /></li>
<li><a href="javascript:scroll('#fazemos');">Oque Fazemos</a></li>
<li><img src="img/space.png" style="vertical-align:middle;" /></li>
<li><a href="javascript:scroll('#cases');">Cases de Sucesso</a></li>
<li><img src="img/space.png" style="vertical-align:middle;" /></li>
<li><a href="javascript:scroll('#contato');">Contato</a></li>
<li><img src="img/space.png" style="vertical-align:middle;" /></li>
</ul>
</div>

Valew