Whitespace problem in IE

[Balloon]

Hi,

I'm currently working on a CSS layout for a new site (sorry if this is a newbie question!) and am having some problems.

I have a DIV layer which currently has an image in it...

<div id="QuickFindTab">
<img src="quickfind.jpg" />
</div>

I also have some CSS which moves this around. In FireFox, this renders fine. In IE, a small white gap is rendered below the image. I guessed that this was to do with some white space text characters being added, so I tried this...

<div id="QuickFindTab"><img src="quickfind.jpg" /></div>

... and it works fine!

So - the question is, how do I fix this rather than working around the problem? At the moment all I have is an image in the DIV, but I may want some text later, too. I've tried setting the font-size to something really small, but I still seem to get at least a 1px gap at the bottom!

Any help is really appreciated!

Thanks,
- Chris

[antidote45]

Try this:

div img {
display: block;
}

hope that helps.

[Balloon]

Thanks - that works a treat!

Any clues as to WHY it works, so that I can understand it in future?

Thanks,
- Chris

[createErrorMsg]

Any clues as to WHY it works, so that I can understand it in future?

Images default as inline elements, which means the browser takes the following steps in rendering your code:

First, it creates the block level div. Then, inside of the block level div, it creates anonymous line boxes to hold the inline content, in this case the image. Line boxes include some built in space that is part of the element's line-height. That's your gap. (Note that eliminating the whitespace only works in IE; with a valid doctype, FF renders the gap below the image even if your html is all on one line.)

Setting the image to display:block changes the rendering process. Now the browser creates the block level div, then creates the block level image inside of it. Since there is no inline content, no line boxes are created and no gap appears.

You can set line-height to zero (on #QuickFindTab), and it has the same effect as display:block on the image. I don't advocate this as a solution, mind you. Display:block on the image is a much better solution as it will allow you to add text later without recoding. I just mention it by way of explanation. You can tweak the line-height on the div and it will change the height of the gap you're trying to get rid of: clear evidence that you're dealing with a line box.

To read more about block boxes and inline elements and anonymous line boxes, check out the W3's page on the Visual Formatting Model [w3.org].

cEM