CODEWITHSUNDEEP
cssinternet-explorer-6internet-explorer-7
Jeff
Jeff

Reputation: 6110

CSS padding on input element breaks ie6 ie7

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.

Upvotes: 1

Views: 1388

Answers (1)

mercator
mercator

Reputation: 28656

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.

Upvotes: 4

Related Questions