search

jacobabrennan / Project-Fennel

http://antlerpig.com
4 stars 2 forks source link

Chat box cut-off #12

Closed jacobabrennan closed 11 years ago

jacobabrennan commented 11 years ago

The chat box cuts off the left-most couple pixels of its contents.

This can be fixed (without broken padding) by giving the lines a margin-left. Thanks to Alturos@gmail.com for the suggestion.

Alturos commented 11 years ago

4px seemed to do it. Also recommend removing overflow: hidden; from div#chat.

jacobabrennan commented 11 years ago

Maybe I'm not seeing the issue that overflow:hidden is causing. What does it do in your browser?

In other news, I've fixed this issue by adding margin-left:0.5em to .chat_line, as well as display:inline-block (so that multi-line messages will get the proper margin as well).

I'll close this issue once I find out about and resolve that overflow hidden thing.

Alturos commented 11 years ago

When I was messing with it in chrome, removing the hidden got the text to sit neatly on the left and bottom lines (rather than being cut off on both). Adding the margin moves it off the left hand line (which would have the effect of preventing the left cut-off by itself) but doesn't do anything for the bottom.

I just had a look and it doesn't seem to be cutting off on the bottom now (though it sits a little close), so you're probably fine.

Alturos commented 11 years ago

Actually, it does appear to cut off a couple pixels on characters below the baseline. p's and g's and the like.

jacobabrennan commented 11 years ago

Additional Debug info: The height of the output div is set to the height of the chat div minus the height of the chat input. However, the output has a border, which isn't taken into account when setting the height. This causes the content of the div to be pushed down by the same amount as that border, which is why it is being cut off.

Alturos commented 11 years ago

Margins or padding should take care of that.