Previous Topic Next Topic

Displaying an image on a web page

Solved/Closed
BrianGreen Posts 1010 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Oct 24, 2015 at 07:07 AM
BrianGreen Posts 1010 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Oct 26, 2015 at 06:40 AM
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

Answer 1 / 1
BrianGreen Posts 1010 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 149
Oct 26, 2015 at 06:40 AM
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