CSS Bold Text subscripted with image in same line

Question

Just look at this screenshot and I think you'll get my problem:

This does only happen if there's a image (like this smiley) in the same line. Happens to bold, italic and underlines text. There is no special formatting on the image.

Does anyone have an idea what could cause this?

Answer 1

Just by looking at the image, my guess is that the height of the image is larger than the actual smiley, which makes the parent container larger and causes the text to not line up. I see two solutions:

1. Adjust the height of the image so that it matches the height of the font you are using, and make sure the image tag doesn't have any extra margin or padding. Or:

2. Adjust the vertical alignment of all of the text in each chat row's parent container.

I think the second option may be more appropriate as it will keep everything aligned, even if the font size changes (whether it's a design decision, browser rendering, or a user using a custom style sheet). However, you may need to do both in cases where text spans multiple lines for a single message, or you might get large line gaps when emoticons are used.

If the parent container is a TR or TD you can probably just set the vertical-align property to middle and be fine. Otherwise, you'll need to change it's display type as Guillaume suggested, or use a table to display the chat content (which may or may not be preferable, depending on how you feel about using tables in mark-up for non-tabular data).

Answer 2

Try this CSS for your "Rini00"

<style type="text/css">
  #span-or-div-containing-rini {
    display: inline-block;
    vertical-align: top;
  }
</style>