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. 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.
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.
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.
I've tried giving it every possible css style I can think of to try and get it to work. I thought overflow:visible; would work, but I saw you already tried it. It's like the input boxes have a set overflow:hidden; on the borders of the text, regardless of what you do with padding, etc.
If you happen to figure it out, let me know! Also, the site looks really good. Nice work!
Sounds good, man. I even tried setting the div, input, and all the borders and stuff around it to transparent, and it was still getting cut off by a blank box. So I have zero clues on how to make it work.
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 : )
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. 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
Any ideas?
overflow:visible;would work, but I saw you already tried it. It's like the input boxes have a setoverflow:hidden;on the borders of the text, regardless of what you do with padding, etc.If you happen to figure it out, let me know! Also, the site looks really good. Nice work!
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.