Bottom few pixels of text cut off

Question

I really can\'t figure out what\'s going on in this case. On the multiline pieces of text, the bottom few pixels are cut off.

Answer 1

Setting

line-height: normal;

Worked for me.

Answer 2

As per specific Browsers this kind of issue is related to the Font Family, very often. My solution for text being cut off is to change the font family to sans-serif and see if this has any effect. This worked infallibly on any browser I tried it in.

As from what the other threads above are stating... it just might help to adjust line-height and padding, sometimes, but for me, none of these worked in general:

max-width: 100%;
min-height: 1.62em;
padding: 2px 5px 2px 5px;    
vertical-align: initial;

font-family: initial, sans-serif, serif; is a good starting point and then you can find a font that plays nice with your theme/site.

Answer 3

For me it was font-kerning. Its default value is auto which means it is using kerning information stored in a font. I changed it to normal and it fixed the issue.

input {
  font-kerning: normal;
}

Answer 4

On #slidertext li you have overflow: hidden; set. You either need to adjust height of the li, you have inline styles setting it to height: 32px, turn off overflow, or adjust the font size inside of there.

Answer 5

Check the size of the sliderwrap, the height attribute may be in conflict with the total text size, and since your overflow is hidden, according to your css property, that might be your issue.

Perhaps fixing it like this:

#sliderwrap
{
    height:114;
}

Answer 6

The quickest fix looks to be this:

Change the font-size here from 14px to 13px

#slidertext h3 {
font-size: 13px;
// other styles
}

Works for me in Chrome.