Oldboy is Sad

aanand

Why is Oldboy sad, even though a woman has her arm around him and is pointing at something? Because he can't figure out why the div he's standing in is taller than his picture.

If you have any information that can lead to the resolution of this problem, please help me help Oldboy.

(PS: happens in FF 1.5 and Opera 9b, but not in IE 6)

(PPS: increase/decrease text size in Firefox for added fun and a possible clue)

Jan

Yup, I've seen that one before... *sigh* This should do the trick:

<div style="background: #aaa;"><img src="oldboy.jpg" alt="oldboy is sad" style="display: block" width="400" height="320" /></div>

Bergamot

The problem is the nonzero line-height, which is applied to inline elements like img.

Jan's solution works; the other option is to use <div style="background: #aaa;line-height:0;">
It really depends if you need other things on the same line.

aanand

Hrrrrrrnk! It's so easy to forget images are inline elements when they get all big and impressive like that.

Kisses to you both. Oldboy's overjoyed! In fact, he was so excited and animated I couldn't get a picture - he wouldn't stop moving.

Bergamot

img is weird like that; it's the only inline element I can think of that can have defined dimensions.

instagata

Annand, you can fix all of that with div.yourClassname img{ display: block}