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