After a bunch of googling and searching, I can't seem to find any info on this.
The problem:
In ie6 and ie7, the text entered into a styled input is displayed "cut in half", with some of the text clipped off in the middle and the remainder hidden underneath the bottom of the input.
Picture the word FOOBAR
inside the input. You would only be able to see the top-half of the word, with the bottom-half hidden by the bottom-part of the input.
The input element:
<input name="email" size="40" type="text" id="email" class="input" />
The styling:
input, select, textarea {
font: 13px Verdana, Geneva, sans-serif;
}
input.input, textarea.textarea {
padding: 10px;
}
When I adjust the padding between 0-2px, everything is fine. Increasing the padding pushes the text further south.
All other mainstream browsers work fine, just ie6 and ie7 are giving me headaches.
There are no other styles in play.