Por que minha imagem está muito alinhada à esquerda no Firefox x Chrome - css, firefox, google-chrome, html, image

Eu tenho esse código, que está se comportando de maneira diferente no firefox vs chrome.

<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="/images/IMAGEURL" /></div>
</h2>

a classe fi_logo referenciada acima é:

.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}

No firefox, há um deslocamento causado pela margem esquerda no fi_logo entre a imagem e o texto (em h2). Se eu não adicionar a margem esquerda, a imagem se sobrepõe ao texto no chrome.

Portanto, resumindo, se eu adicionar a propriedade margin-left, ela funciona no chrome, enquanto causa um grande deslocamento no firefox. Alguma sugestão sobre como resolver isso?

Respostas:

Aqui está: http://jsfiddle.net/bikerabhinav/mpL79/2/ Use a combinação de posição relativa e absoluta. Além disso, não use div dentro de h2 - marcação incorreta

Talvez se você definir .fi_logo display: block

Penso que o seu problema está na versão específica do navegador. Eu verifiquei no FF 3.6.2, que retorna o mesmo resultado que o Chrome

Bem, parece que você ainda não resolveu isso, então farei um pouco mais de comentários.

Não sei dizer exatamente o que está causando inconsistências no navegador sem fazer várias tentativas e erros, mas acho que a maneira de corrigi-lo é repensar a maneira como você está posicionando a imagem.

Parece muito complicado posicionar o img absolutamente, flutuar e adicionar uma margem esquerda. Dado tudo isso, não está claro o que exatamente você está tentando realizar com esse código.

Se você editar sua pergunta para descrever como deseja que a imagem seja posicionada, eu (ou outra pessoa) ficaria mais do que feliz em recomendar uma boa abordagem

Seu html é inválido. Você não pode ter uma div dentro de um cabeçalho. Eu também questiono o float e o posicionamento absoluto no mesmo elemento. Também me pergunto se você está usando um doctype.

Sua tag de imagem dentro do div não está fechado corretamente e no css a definição de classe está errada; a classe é definida por um ponto (.);