The problem may appear in other browsers, I have not tested it yet.
Sorry, but it will take a certain amount on your part. Please carry me.
Open Firefox. You need a Firebug extension or something that allows you to run a single JS command.
Go here . Sorry for all the anime.
Open the Firebug console and run the following command:
CSSdev.enable_tiles()
Now you are looking at the base grid. Each square is 24x24 pixels. The line height across the site is 24 pixels, with no exceptions. Images, margins, the size of the whole multiple 24px.
Scroll down until “Fluffy tag cloud” appears in the sidebar. Note that something underneath is inappropriate; it's a little too low. If you go to the Firebug DOM tree to that part of the layout and hover over the <p> element, you will see that the height of the tag cloud is a little too high.
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, these are just a few pixels, too large.
This is strange because <p> contains only text and the line height is 24px, so its height should be 24px times the number of lines of text inside it, regardless of the font size of anything inside. So I get it anyway.
Given that:
- The tag cloud inherits the line-height rule: 24px;
- The font size of any range within the cloud is 20 pixels or less;
- The only way to fix the problem seems to be to provide all uppercase letters with the same font size (for example, all font sizes of 16 pixels)
Are there any fixes or fugly hack that I can use to have different font sizes and 24px line height?
I don’t know why Kobe deleted his answer, but this actually led to fixing my problem. The solution is to convert it to a list, UL and LI inside it, swim the LI on the left and set them to 24px height and a small margin to keep them horizontally apart.
@Kobi: please add your answer so that I can accept it
Since I fixed the problem, the steps described above will no longer work.
source share