Menu de navegação horizontal

Voltei a trabalhar com web nas últimas semanas. Uma coisa que precisei fazer foi um menu horizontal para navegação geral. Há milhares de exemplos disso por aí, mas eu precisava de um pequeno detalhe a mais: uma imagem personalizada para a lista de itens do menu.

Para começo de conversa, as implementações desse tipo de menu usam listas (tag ul e li) com atributos de estilo para tornar a listagem horizontal. Pode ser display: inline ou float: left. O código fica assim:

HTML:



E o CSS para deixar horizontal pode ser:



ou



Aí podemos colocar a imagem para a listagem com o atributo list-style-image e colocando a URL da imagem:



Mas isso só funciona para o float: left, tá?

Agora o pulo do gato: cada navegador coloca um espaçamento diferente do lado esquerdo desta nossa imagem! Qual propriedade ajusta isso? Nenhuma!
Contornei este problema usando esta mesma imagem como fundo do elemento de lista e ajustando o espaçamento do lado esquerdo (padding-left) com o mesmo tamanho da imagem de fundo. O código final ficou assim:



Atualização: coloquei os códigos nos meus Gists do Github para colocar aqui. Temos destaque de sintaxe, agora!