Emoticons cutting off text lines

[Msven]

Hi there,
I noticed that whenever a new line of text (it might have to be at the bottom of the chat box) contains an emoticon that is being loaded in the chat for the first time, the line does not have the proper height. The line is cut off at the bottom, and looks especially bad with the larger emotes like Keepo because it cuts off part of the text.

Here’s what it looks like: http://imgur.com/cMBuEeZ
And it looks normal when the emoticon has been loaded previously: http://imgur.com/O7dwjPZ
Is there any way to fix this?
Thanks!

[Izl]

Try using these properties in your CSS.

.chat_line {
            line-height: 26px !important;
}  
.tag {    
            margin-bottom: 3px !important;
}

This will change the line height to accommodate emotes, (26px-28px is good) and the .tag property will re-align the text to the chat badges (try values from 2px-7px to get the alignment correct.)

[Msven]

Thanks for the reply. I’m using a fairly small chat box so that line height is too large. Been messing around the CSS and nothing has seemed to work. I wanted to try removing the bottom border in #chat_box and add padding instead but it doesn’t seem possible to override the existing CSS for border-radius. Don’t know if it would work, anyway.

[Izl]

When using custom CSS to override the default be sure to include !important tags on all of your changes to ensure they work.

[Msven]

I have been using !important but it still doesn’t work, not sure why.