views:

708

answers:

1

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.

+4  A: 

This only happens in Quirks mode, so fix your doctype.

It looks like IE isn't able to change the height of an input in quirks mode, causing the padding to just move the text out of view due to the top padding.

mercator
Well I have a bunch of "test PHP" code in my header file which is generating a few <ol>'s before my doctype is set. Do you think that's the problem?
Jeff
That did the trick! I guess I never knew about Quirks mode. Lol, thanks very much.
Jeff
Better make sure your doctype always comes first, even preceding any debug output, or you might get some nasty surprises when you go live and browsers suddenly render your pages in standards mode instead of quirks mode.
mercator
Been doing web dev for quite a while, but I learned something new today. Thanks again!
Jeff