Problema com itens (ul-li).

Olá pessoal,

Tenho o seguinte código HTML:

<ul id="hada_ul">
<li style="background-image: url(hada.jpg); background-repeat: no-repeat;"><img src="hada1.jpg" /></li>
<li style="background-image: url(hada.jpg); background-repeat: no-repeat;"><img src="hada2.jpg" /></li>
<li style="background-image: url(hada.jpg); background-repeat: no-repeat;"><img src="hada3.jpg" /></li>
</ul>

E o seguinte estilo CSS:

ul#hada {

	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

ul#hada li {

	height: 29px;
	margin: 0px;
	padding: 0px;
	line-height: 100%;
	display: inline;
}

Problema: As imagens de fundo ficam com um enorme espaço ao topo no Firefox, já tentei pôr 0px 0px nas posições, mas continua na mesma. Será que alguém poderia me ajudar?

Abrass.