Question

I’m trying to set an input box with a specific internal height, and I’m running into issues:

font-size: 12px; line-height: 12px; height: 12px; display: block; padding: 5px;

Is a sample of what I put in inline styles or stylesheets. I would expect the input box value to be visible at full height, but the inner height of the input box ends up being really small, and it always seems to follow the form:

actual inner height = css height - 2*border width - 2*padding

Funny, because I swear I’ve done this before without issue. What am I missing?

Answer 1

The formula you gave would count for some Internet Explorer version. So maybe you use a very old browser? 😉

Read about the bug on Wikipedia. According to that article, the bug is still present in all IE browsers if the page is render in “quirks mode“, which is triggered:

• When the document type declaration is absent or incomplete;
• When an HTML 3 or earlier document is encountered;
• When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
• When an SGML comment or other unrecognized content appears before the document type declaration
• When there are errors anywhere in the document
• Internet Explorer 6 also uses quirks mode if there is an XML declaration prior to the document type declaration.

Maybe you have some error in your page….

Or you are using Firefox and I am totally missing the point.