Imagem não alinha

[3dmaniaco 1]

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:

 

 

Mas esta ficando assim

 

:

 

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

[Wanderson Valerio 102]

 

#menu {
position: absolute;
background-color:#303032;
z-index: 10000;
height: 70px;
left: 0px;
top: 0px;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: list-item;
color: #FFFFFF;
font:10% Tahoma;
font-size:medium;
position: relative;
}
 
#menu ul li img {
position: absolute;
top: 0;
left: 0;
}
#menu ul li a {
color: #FFFFFF;
text-decoration: none;
}

[Maujor 144]

Altere sua CSS assim:

 

#menu { 
  ...
  height: 70px; /* aumente essa altura até a imagem "entrar" no menu */  
  ...
} 

#menu ul li { 
  ...
  font:10% Tahoma; /* RETIRE */ 
  font-size:medium;  /* RETIRE */  
  font: medium Tahoma;  /* ACRESCENTE */ 
}

[3dmaniaco 1]

Eu testei aqui,mas não funcionou.

[Maujor 144]

Eu testei aqui e funcionou: http://jsfiddle.net/KLS3p/

[3dmaniaco 1]

Então Maujor a imagem juntamente tem que ficar com TOP 0 e LEFT 0 e o height tem que ser 70px pois minha imagem tem 70 de altura, oque estou querendo fazer é que a imagem fique bem junta do topo do site, bem no canto.

[Maujor 144]

Poste as imagens logo.png e space.png

[3dmaniaco 1]

Minhas imagens:

 

logo.png

 

 

space.png

 

 

Valew

[Maujor 144]

Veja: http://jsfiddle.net/KLS3p/1/

[3dmaniaco 1]

Agora ficou legal.

 

Valew Maujor