...

View Full Version : Extra blanks w/img in div box



kimlb
02-13-2005, 01:04 AM
I'm wondering why there are a couple of pixel's worth of blank space under an image in a div container:

CSS:
body {margin: 0px auto;}
#border_cont {
margin: 0px auto;
width: 500px;
padding: 0px;
border: 1px solid #ccc;
}

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link type="text/css" rel="stylesheet" href="css/no2.css"></head>
<body>
<div id="border_cont">
<img src="images/design/blue_grad.gif">
</id>
</body>
</html>

The border_cont works fine, but when inserting any image into it, I'm always left with a couple of pixels between the bottom of the image and the bottom of the border_cont border, even though both margin and padding is set to none.

I've also tried specifying height for the border_cont, but to no avail. Help?

WinXP/IE6.

Fashong
02-13-2005, 01:09 AM
Maybe because you didn't end the div tag??

kimlb
02-13-2005, 01:42 AM
Nope, noticed that, but no change when replacing </div> (don't know where that came from...) with </div>

Jalenack
02-13-2005, 01:52 AM
Your problem is that <img> is an inline tag.

In your css, you could apply.

#border_cont img {
display: block
}


Inline elements have a "baseline" of approx. 3px to allow for text and such...like when you use "p" and "j" then go under the baseline.

kimlb
02-13-2005, 02:01 AM
That works good, thanks. I also found out that setting the height of the div container works in FF, but not in IE. Not sure which IE bug this is, but read something about a three-pixel jog issue with IE, maybe that's it.

Thanks again.

kimlb
02-27-2005, 02:25 AM
Ignore



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum