Blog Documentation Book a Demo

Oldboy is Sad

aanandaanand
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)

Comments

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