Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Oldboy is Sad

edited February 2006 in Vanilla 1.0 Help
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)


  • Options
    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>
  • Options
    edited February 2006
    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.
  • Options
    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.
  • Options
    img is weird like that; it's the only inline element I can think of that can have defined dimensions.
  • Options
    Annand, you can fix all of that with div.yourClassname img{ display: block}
This discussion has been closed.