Displaying an image on a web page

Hi Guys,

Here I am again with yet another scripting problem. I must give scripting up, but first I want to see what I am doing wrong ... any help would be appreciated with this - I've been on it for about a week.

I have the following CSS:

#logo {position:relative; top:0px; left:0px; background-color:black; width:190px; height:123px;}

And this html:

<div id="logo">
 <img src="img/logo.gif" alt="logo" />
</div>

The image I am using (logo.gif) is 190 x 123 pixles. It fits inside the logo <div>
Also, I am using XHTML 1.0 Transitional coding.

The two questions I have ...

1) Why is the size of the image reported as wrong when interrogated by "inspect element" in Firefox? It tells me its 194 x 127. (I havent looked at other browsers yet.)

2) Why is there a black bar at the top of the image? to "hide" it I need to use the following in CSS:

#logo {position:relative; top:-10px; left:0px; background-color:black; width:190px; height:123px;}

I know its black because I have the 'background-color' set as black, but my question is more "why is it there at all?" - after all the <div> is set to the height of the image. When this is sorted I will remove the 'background-color' attribute.

Any help would be greatly appreciated.


Edit - later that day ...

Ah ... sort of found it ...

Earlier in my CSS I have:

img {margin:10px auto 16px auto; padding:1px; background:#ffffAA; border:1px solid #ffffAA;}

This accounts for the wrong size (padding and border all round set to 1px giving a total of a size difference of 4px) and why I have the black space at the top. Now all I need is to find out how to negate these settings for just this one image.

Thanks for looking so far