CSS problems across browsers, but IE working?

Question

I am having problems placing a logo in my header. The header is in a span of 257px. It "appears" to place fine in Firefox/Chrome/Safari on both Mac and PC. With IE 8/9 it "appears" the problem exits. The twist here is that it actually works in IE and not the other browsers. I really need at least 21px for the padding-top.

With the CSS below, IE is actually correctly rendering it but all the other browsers are adding close to 20px in the padding-top.

The CSS as it stands now, after many different iterations is.

.img {
    display: block;
    padding: 1px 0 21px 8px;
    width: 200px;
    height: 40px;
}

Any help tracking this down would be appreciated.

Answer 1

how about using absolute positioning withing a relative positioned span/div?

say for example:

<div style="position:relative;">
  <img src="..." style="position: absolute; top: 21px">
</div>

this would place the image 21px from the top of the parent div.

to illustrate it better. i made a jsfiddle

http://jsfiddle.net/RD26R/