PDA

View Full Version : CSS with <form> <input type="text> field



dschmierer
Nov 29th, 2006, 04:58 AM
When the user types text into a form field on my site some of the "below the line" pieces of letters get cut off (e.g. the low hanging parts of letters 'y' 'g' 'p' etc.) Note: only happens in Firefox 1.5, I do not observe this behavior in IE 7. Any idea why this is happening or how to fix it? Here is some of the CSS:

div#forms input {
border: 1px solid #aaa;
margin-top: 2px;
width: 120px;
height: 12px;
font-size: 10px;
}

For the body i've declared:

body {
font: .8em Verdana, Arial, Sans-Serif;
line-height: 1.6em;
margin: 0;
}

Note: the visual white space within the field appears big enough for the entire letter, but the text sits low in the field.

Thanks in advance.

_Aerospace_Eng_
Nov 29th, 2006, 05:09 AM
Don't set a height on the input and you won't have a problem.