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.
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:
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.
OK - sorted it. It seems you have yo open a new class for the images you need different. I ended up with this CSS:
#logo {position:absolute; top:0px; left:0px;}
img {margin:10px auto 16px auto; padding:1px; background:#ffffAA; border:1px solid #ffffAA;} /* for all other pictures*/
img.nofrills {margin:0px; padding:0px; border:0px;} /* for pictures with no borders so I can position them where I want them without the other code interfearing */
6403 users have said thank you to us this month
