cut tag image not in line with text

[runpunkrun]

Hi, do I have a fussy question for you:

The little cut-tag triangles never seem to line up with their parentheses in any style I've used. Previously I've been able to nudge them into place, but on my new layout for fancake, they are off and the only way I can make them line up nicely causes a problem.

I did this:

span.cuttag a img {
margin-bottom: -6px !important;}

And it's fine...but if the entry ends with a cut tag, this creates a vertical scrollbar within the entry. Clearly this is because of my negative margin bottom. Is there a nice, honest way to do this that doesn't infringe on neighboring elements? That triangle needs to be nudged down a whole bunch.

Thank you!

Comments

[momijizukamori]

I think if you change that to vertical-align: bottom; it should accomplish the same thing as the negative margin without the scrollbars? I don't remember the exact reason this happens with images that are wrapped in a link, but it's got something to do with the line height alignment to the surrounding text.

[runpunkrun]

That helped a lot, thank you! It's still not actually aligned with the bottom of the text, but at least it's not way up in the air, and no vertical scroll bar!

I added the same thing to .cuttag-action-after img so they match.

[momijizukamori]

From what I was reading about vertical-align, it looks like you can maybe specify a custom offset, which might get you closer?

Honestly I kind of wonder if there's a font glyph we could use instead because I think anything with images is going to be tricky to align properly.

[runpunkrun]

Heeeey, now we're talking! I did:

span.cuttag a img {
vertical-align: -6px;}

.cuttag-action-after img {
vertical-align: -6px;}

and the triangles are centered against the text real nice and no vertical scroll bar!

I agree it'd be nice if there was a way to address this site-wide. I mean, it's not a huge deal, but it doesn't look great that these elements aren't aligned better, and I know it drives some of us bonkers.

Thanks for all the help!