Displaying an image on a web page [Solved/Closed]

Report
Posts
1004
Registration date
Saturday January 17, 2015
Status
Moderator
Last seen
November 27, 2020
-
Posts
1004
Registration date
Saturday January 17, 2015
Status
Moderator
Last seen
November 27, 2020
-
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

1 reply

Posts
1004
Registration date
Saturday January 17, 2015
Status
Moderator
Last seen
November 27, 2020
118
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 */

and this html:
<div id="logo"> <img class="nofrills" src="img/logo.gif" alt="logo" /> </div>


I hope this helps others in a similar quandary.
1
Thank you

A few words of thanks would be greatly appreciated. Add comment

CCM 2942 users have said thank you to us this month

Subscribe To Our Newsletter!

The Best of CCM in Your Inbox

Subscribe To Our Newsletter!