Comments on: Whose line-height is it anyway?

Question: Whose line-height is it anyway?

goodnewsfortheinsane — Sun, 04 May 2008 07:51:28 -0800

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.

By: goodnewsfortheinsane

goodnewsfortheinsane — Sun, 04 May 2008 07:52:23 -0800

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.

By: Gomez_in_the_South

Gomez_in_the_South — Sun, 04 May 2008 08:29:50 -0800

<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.

By: stopgap

stopgap — Sun, 04 May 2008 08:33:22 -0800

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.

By: stopgap

stopgap — Sun, 04 May 2008 08:35:56 -0800

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.

By: kamelhoecker

kamelhoecker — Sun, 04 May 2008 08:57:39 -0800

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?

By: missmagenta

missmagenta — Sun, 04 May 2008 09:05:50 -0800

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?

By: theiconoclast31

theiconoclast31 — Sun, 04 May 2008 10:51:16 -0800

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'.

By: goodnewsfortheinsane

goodnewsfortheinsane — Sun, 04 May 2008 12:57:03 -0800

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"> </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!

By: mallow005

mallow005 — Sun, 04 May 2008 17:50:44 -0800

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.

By: mallow005

mallow005 — Sun, 04 May 2008 17:51:51 -0800

Oh, sorry. The line-height rule is set in .block. Set the line-height for .block to 1.