parts of italic/script text being cut off at start of line

[mwestern]

I have run into this problem before and haven’t been able to figure it out. This time it is happening in a wufoo form so I thought it was time to go ask the guru.

Occasionally when using italic or script text the foot/descender/serif of the first letter is cut off. See the (wufoo : ) form in this site for an example. http://www.norganic.org

In this example the client really likes the custom font in the form so I don’t want to change it but, for example, if your first letter in the name field is a small “j” it cuts part of the letter off. I have tried things like – text-overflow: ellipsis; or
overflow: visible; but I can’t seem to fix it.

Hoping you (or someone) could help.

Website Link

[TheDoc]

If it’s a special font you might need to adjust both the font size and the line-height. Some fonts will get clipped at certain sizes if they haven’t been optimized properly.

[mwestern]

Thanks Doc. If it was cutting off the bottom of the text I could see that working but it is cutting off the left edge of the first letter in the field. It has something to do with the containing div I think.

Any ideas?

[mwestern]

Thanks for the props Chris.

As I said, I have run into this a few times now it is getting pretty frustrating : ) I will make sure the solution is posted here.

[mwestern]

I have asked a number of industry friends and they have been stumped as well. Thats why since I think it is a css issue and it is happening in a wufoo form there would be no better person to ask than mr. css tricks himself : )

[Author]

Posts