unwanted background space on images

[urbinder]

Hi all,

I’m new to CSS and new to this forum, but I’ve been getting excellent value from Chris’ tutorials. I am building a site currently with CSS & HTML and things are going OK, except that all my images have a few pixels of extra background space on the bottom length. I have tried removing all styling from the elements, but the extra space stubbornly persists. Could some other CSS be affecting it?

Here is the CSS associated with the images with the problem:
_______________
.image {
float: left;
background-color: #533e30;
border: 5px solid #dbe9c8;
margin-top: 36px;
}
_______________

Although even with this tag deleted the space problem persists.

The site can be viewed here, though please note that it is very much under construction and there are other issues that I am yet to address. Any help or hints would be very appreciated.

http://www.greenelementconstructions.co … index.html

Thanks,
David

[maris]

Nice site.

Have you tried zeroing out padding?

[urbinder]

Thanks Maris.

Yes, I’ve tried setting padding: 0px; – I still get the devilish bottom space. In fact, I’ve tried removing all styling from .image and the space still sticks around.

[Chris Coyier]

Weird one!

Code:

.image img { display: block; }

[urbinder]

Fantastic! Thanks Chris. You truly rock.

I don’t think I would have ever figured this one out. I’m not certain why it works, except that t has something to do with the fact that I have avoided specifying heights & widths to the .image so it can be used on different sized images. Therefore, perhaps it’s treating the img as an inline element? Why this would cause the space I’m not sure but I’ll keep it in mind while I’m finishing up the site.

Anyway thanks again. For this bit of brilliance and for your whole site.

David

[Author]

Posts