Space under image

[David_Ehmer]

I have placed an image in a div like so; <div id="leftcontent"> </div>

the css for id is;
#leftcontent {
position: absolute;
left:12px;
top:198px;
width:230px;
height:385px;
border:1px solid #000;
background-image : url(../images/kids.jpg);
background-repeat : no-repeat;
background-color : White;
}

This results in a small horizontal space of about 3 px at the bottom of the image. It renders this way in NN6 & IE6. IE5 appears to not have the space. Any ideas about what's happening here?

A different issue with IE5.5 however is the center column doesn't appear to display a height consistent with the left and right content divs.

#centercontent {
position : relative;
top:3px;
background:#fff;
padding : 10px 30px 20px 30px;
margin-left: 205px;
margin-right:229px;
border:1px solid #000;
border-left-style : none;
border-right-style : none;
height:355px;
voice-family: "\";}\"";
voice-family: inherit;
margin-left: 205px;
margin-right:229px;
}
html>body #centercontent {
margin-left: 205px;
margin-right:231px;
}

Any suggestions or comments very welcome.

Thanks
David

[BlobFisk]

Have you tried adding a padding of zero to #leftcontent?

[madcat]

The old three pixel mystery...

img { display: block; }

* See if that is in fact what's going on.

[lowlander]

I could not see any space under image (between image and border). The image is the same height as the div block?
The height inconsistency is the way IE5 calculates the size of the block. With IE6 in standard mode this inconsistence does not appear.

[lowlander]

I noticed that you are using: <?xml version="1.0" encoding="iso-8859-1"?>
as the first line of your document. <snip> This puts IE6 into quirks mode, causing the box-model problem.

[edited by: Nick_W at 8:34 am (utc) on May 17, 2003]
[edit reason] no urls please [/edit]

[David_Ehmer]

Thanks for all the suggestions.

As a result the page now validates and the space problem is no longer.

The solution appears to be using

img { display: block; }

David