0

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

Screenshot

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?

Tobias Baumeister
  • 2,107
  • 3
  • 21
  • 36

2 Answers2

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).

framauro13
  • 797
  • 2
  • 8
  • 18
  • vertical-align looks very weird, since the td is sometimes much larger than the actual text in it. I don't want the text to be in the middle (But it actually works for this problem. It just doesn't look well) – Tobias Baumeister Aug 01 '13 at 16:55
  • The smiley's height is 18px. But I need to set the line-height to 24px, so that it works. And then it looks weird again. – Tobias Baumeister Aug 01 '13 at 16:55
  • Update: okay, line-height: 18px works on firebox, but on Google Chrome I need to set it to 24px. Really weird - but thanks for your help! :) – Tobias Baumeister Aug 01 '13 at 17:02
  • Interesting. Did you check to see if there was any additional padding or margin on the smiley? Inspecting the element in your preferred web dev browser tool might let you see if any other styles are being applied to it that might not be noticeable directly in the CSS, especially if you are using any other CSS frameworks. The total width of the element should be `height + padding + border + margin`. – framauro13 Aug 01 '13 at 17:02
  • Interesting. Gotta love browser compatibility issues :) – framauro13 Aug 01 '13 at 17:03
  • Yes, I did check the image and there is no border, margin, padding or extra height. Even if I set the border, margin and padding manually to zero, then it still doesn't work on Chrome. – Tobias Baumeister Aug 01 '13 at 17:06
-1

Try this CSS for your "Rini00"

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