Resolved Placing Images in Divs

[JoelC]

Hey guys, please take a look at this page:
http://www.joelfolio.com/image.html

As you can see, I've placed an image in a div.
For some reason this div is showing up with an extra couple of pixels on the bottom (under the image).
This only occurs in Firefox as far as I can tell. It works fine in Explorer.

I've tried setting margins and padding to 0px, removing bottom borders. Doing pretty much everything.

The code is simply:

<div style="background:#3F0"><img src="test.jpg"></div>

Any ideas how to resolve this?

[SB65]

The gap underneath the img (in everything but IE) correctly allows space for the "tails" of g/j/y etc. You're using a strict doctype - which is fine - this means you need to add display:block to your css/styling for <img> to remove the gap.

Preferably, add:

img {display:block}

to your css , or, with your inline styling

<img src="test.jpg" style="display:block"/>

[JoelC]

Thanks for the tip!
It worked