Firefox not respecting line-height

Question

The problem may appear in other browsers too, I haven't checked yet.

Sorry but this will take some amount of work on your part. Please bear with me.

• Open Firefox. You need the Firebug extension or something that will let you run a single JS command.

• Go here. Sorry for all the anime.

• Open the Firebug console and run the following command:

CSSdev.enable_tiles()

• You're now looking at the baseline grid. Each square is 24x24 pixels. The line height throughout the site is 24px, with no exceptions. Images, margins, the size of everything is a multiple of 24px.

• Scroll down until you can see the "Fluffy tag cloud" in the sidebar. Notice how anything under it is misplaced; it's a little too low. If you navigate in the Firebug DOM tree to that part of the layout and hover with the mouse cursor on the <p> element, you'll be able to see that the tag cloud's height is a little too big.

---

To be more clear: the problem is that the height of the <p> element that wraps all the <span> elements of the tag cloud is not a multiple of 24px; indeed, it's just a few pixels too big.

This is strange, because the <p> contains only text and its line height is 24px, so its height should be 24px multiplied by the number of lines of text inside it, regardless of the font size of anything inside it. This is how I understand it anyway.

---

Given that:

• The tag cloud does inherit the line-height: 24px rule;
• The font size of any span inside the cloud is 20px or less;
• The only way to fix the problem seems to be to give to all the spans the same font-size (e.g. giving everything a 16px font-size works)

Is there any kind of fix or fugly hack I can use to have different font sizes and a line height of 24px?

---

I don't know why Kobi deleted his answer but it actually led to a fix for my problem. A solution is to convert it to a list, UL and LIs inside it, float the LIs left and set a height for them of 24px and a small margin to keep them apart horizontally.

@Kobi: please re-add your answer so I can accept it

---

Since I have now fixed the problem, the steps described above won't work anymore.

Answer 1

This is weird, and I didn't check into that, but it looks like setting this does the trick:

.rank-1 {
   line-height: 1;
}

Again, I'm just playing around, but it seems to align the page the way you want.

Another option is to have the tags float:left and have a fixed height of 24px.