height of <div> & <img> = 50px, but IE has a GAP!

[lenmcgrane]

Hi,

I have a banner 800x50 to run across the top of my page. I have a <div id="top"> that has height:50 and margin:0 and padding:0

But there is a GAP of about 2px along the bottom of the image inside that <div>

Is this something I have to live with? Or is there a fix?

Thanks in advance,
Len

[Harvs]

Hey lenmcgrane,

Do you have a border around this banner?

What browser are you using?

If possible can you post the css code and the html code used to display your banner.

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

The reason why you get the gap is because images, by default, rest on the baseline of adjacent text. Consider the following example:

test:)again:)blah:)pjgqy

See how the images are lined up with the text baseline? In your case, the baseline is still there, regardless of whether there is any text present or not. So, the "gap" you see is nothing more than the space reserved for the descenders on letters like p j g q y. To avoid this, simply alter the vertical alignment for your image:

vertical-align: bottom;

[lenmcgrane]

Wow! That worked Dr Doc. Thanks a million.

Thanks also Harvs.

Len