SOLVED; some entries lower than others?

[gantai]

hi! i have an interesting problem that i have no idea how to fix. i have my coding set up so my icons align with my entries, but somehow some entries are pushed a pixel or two lower, while some aren't. this wouldn't be much of a problem normally, but the way i have it set up, it's... very obvious. :x

Comments

line-height in subject

[anarano]

"line-height: 120%;" in ".subject" causes the problem. Even if there is no subject, the place for subject is reserved. You have to delete the line-height line and work with margin/padding (maybe even using a different div class altogether) to create space around the subject title.

Re: line-height in subject

[gantai]

ah, thank you! even when i had it set to 100%, that didn't help, so i thought if i made it 120% to add more space it would have evened out. i totally removed the line-height, and all that was left to do was shift the icons down!

thank you so much again. :D

Re: line-height in subject

[gantai]

ah, i'm sorry, but i have a question if you don't mind?

i still don't understand why this affected some entries and not others? do you perhaps know why?

Re: line-height in subject

[anarano]

Your welcome :)

It's the combination of the used font, font-size, line-height and the particular letters in a subject title; esp. letters with descenders (g, y, etc.) and some punctuation characters change initial values and the browser calculation will round up/down the results. So the display won't look consistent.

"text-transform: uppercase" does'nt have any effect on the calculation. You'd have to type capitals and waive any kind of punctuation characters to ensure consistent initial values.

To reset line-heigt you have to use: "line-height:normal" instead of "100%".

Re: line-height in subject

[gantai]

aaah, i didn't know any of this! thank you for telling me about this, it'll clear up a lot of my confusion when i work on something in the future, too!