Question

I have a button rendering problem. I’m in IE9 quirks mode. It’s legacy code inside html frames (not iframes) and I have no choice about quirks mode for the present. I have stripped out ALL css and javascript so I believe I’m down to default IE9 rendering.

The problem is this: The padding to the left and right of the button text seems to be proportional to the length of the text. That is, the longer the text, the wider the padding. The client insists on certain buttons having up to 20 characters of text, and those buttons are building in so much dead space inside the button to left and right of the text (i.e., padding-left and padding-right so to speak) that the layout is badly broken.

Since the button text varies from 7 to 20 characters, I can’t easily do fixed-width buttons, either. What I’d like to accomplish is fixed padding-left and padding-right. The best I can come up with is an inline width in ems, e.g.,

<input value="The Big Whateverest" type="button" style="width:11em;">

I tried padding/margin with inline styles but that only makes things worse. Any suggestions?

EDIT: According to the solution, part of the puzzle is that the button is inside a table cell. If you’re here because you need to know this, be sure to follow the link in Adam’s solution to understand the full issue.

Answer 1

You can adapt this solution to your situation by changing .button to input, like this:

<style>
input {
    padding: 0 .25em;
    width: auto;
    overflow:visible;
}
</style>

<!--[if IE]>
<style>
input {
    width: 0;
}
</style>
<![endif]-->