Whose line-height is it anyway?

May 4, 2008 7:51 AM

What's causing these unruly line heights in my web page and how do I solve it?

It's the site linked from my profile. Most of it is dynamic content so it changes fairly quickly; the snapshot linked above is how it renders for me right now, FF 3.0 b5, XP. It happens only occasionally, sometimes the lines are all the same height, as I want them to be.

I'm fairly certain I'm overlooking something, but what is it? Is it an inheritance issue? Should some other value be cleared first? Is it not line-height after all but paddings and/or margins? Something else?

Thanks in advance, guys.

posted by goodnewsfortheinsane to computers & internet (10 answers total)

Oh, I just noticed, there's a little bit of NSFW text in that screenshot, but I'm guessing it's not a big deal.
posted by goodnewsfortheinsane at 7:52 AM on May 4, 2008

<span> tags are not block elements. As a result you can't force their height as you can with a <div> block. I think you may have more luck if you replace the span blocks around each news item with a div. This will give you more control over the styling and you can force the heights that you want.
posted by Gomez_in_the_South at 8:29 AM on May 4, 2008

I'm guessing it's because you specified line-height in ems with a very small font size. The browser has to round the line-height to the nearest pixel, which might be different for different line multiples.

I don't think there's a great solution for this if you want to keep dynamic font sizing (as you should). Maybe use a slightly larger font size for that class.
posted by stopgap at 8:33 AM on May 4, 2008

But for the record, it's rendering fine for me in Firefox 2.0.0.14. so this could be a bug in Firefox 3.
posted by stopgap at 8:35 AM on May 4, 2008

I would remove the the <br> tags and the negative margin on the div that contains the headlines. Whenever you find yourself doing these kinds of hacks, your bound to start seeing weird or inconsistent results.

The page looks fine to me on FF, so it's hard to debug. I thought it might be due to the crazy long 'title' attribute in the anchors, but maybe the problem only happens when the span.headline2 wraps two lines?
posted by kamelhoecker at 8:57 AM on May 4, 2008

tags are not block elements. As a result you can't force their height as you can with a block. I think you may have more luck if you replace the span blocks around each news item with a div. This will give you more control over the styling and you can force the heights that you want.

Whether an element is inline or block doesn't affect the ability to set the line-height. If he were to change to using divs instead of spans, he would have to set them to inline to retain the same presentation - thus rendering them exactly the same as spans.

Your problem is most likely because you're using a beta browser. Does it happen for you in any other browser? Have you tried setting a fixed px value for the line-height and seeing if the problem goes away?
posted by missmagenta at 9:05 AM on May 4, 2008

You've got a very similar series of links under The Daily Read, except those links render without fault. When I took a peek at the code, I realized you didn't use any tables! What worked for me:

1. Remove <table><tbody><tr><td style="line-height: 0.8em;"> and its corresponding </td></tr></tbody></table>.
2. Remove line-height from the headline2 class. Instead, use a single line-height in the block class. You use block pretty often, so maybe you want to do something inline.

An external stylesheet will make debugging CSS so much easier. Just sayin'.
posted by theiconoclast31 at 10:51 AM on May 4, 2008

An absolute value didn't fix it. Neither did removing the table. The problem does seem to disappear when I dynamically increase the text size while viewing in the browser, however, if I up the text size in the code the problem is still there. The problem exists in FF 2.0 too, btw.

As it only seems to affect the final entry in a given panel (I should have added that it affects the smaller entries in Daily Read, too) I added a <span class="headline2">&nbsp;</span> after the last entry and that seems to have fixed it. Still don't know what caused it, though.

Thanks for your input, guys!
posted by goodnewsfortheinsane at 12:57 PM on May 4, 2008

Set the font-size for .headline to a fixed size, such as 11px (the same size that it is rendering now). Set line-height to "1" (no units). This will fix your problem.

Don't worry about setting absolute font-size values, modern browsers scale them the same as relative values.
posted by mallow005 at 5:50 PM on May 4, 2008

Oh, sorry. The line-height rule is set in .block. Set the line-height for .block to 1.
posted by mallow005 at 5:51 PM on May 4, 2008