I’ve set up a fiddle with an example of my problem. Fiddle
I have a wrapper with a header and a content are that will have an image and eventually a few other things.
I want the wrapper to have min dimensions, but allow the content area to increase in size as required. For some reason, the content area height increases beyond the image height. In both FF and IE6. I’ve tried adding “line-height:0;” to the content div, which fixes the problem in FF but not IE6.
Edit:
I kept looking for and answer and I found the two things I needed to do. Apparently FF adds space below an image when it’s wrapped by a div. This can be avoided by specifying the exact dimensions of the content DIV or setting the line-height to zero. This fixed the problem in FF but was still present in IE6. I guess there is a bug if white space is left behind the the image tag. So adding the closing div tag immediately after the image tag solved the problem.
Using display: block; on the image worked a lot better in FF.