The stretched buttons problem in IE

As you might know, web forms have to by styled with care, since their native look often is the best you can achieve.

That said, sometimes even default look has its bugs. A truly flagrant mistake concerns buttons in Internet Explorer (including version 7) in Windows XP. If the button's caption is too long, the browser produces such a nasty thing:

(see example)

This is a combination of two bugs:

• the buttons are unnecessarily too wide
• large buttons are rendered jagged and weird

The second bug is not likely to be fixed. That's an error in the rendering kernel of the browser, and all you can do is to report it to the developers and hope that they'll do something about it in the future. Maybe…

It's interesting that the wider the button, the uglier the rendering. So by solving the first problem, i.e. by forcing Internet Explorer to narrow the buttons to their correct width, we should be able to reduce or even eliminate the jagged-rendering effect. Let's see.

Narrowing the button

My attempts to set different values for width or padding didn't work. In such a moment, the webdesigner usually tends to fly blind and experiment with CSS properties like display, overflow, position, etc. The result was that setting overflow: visible does what we want. Since the button confines the text tightly in this case, adding the padding property is recommended.

input.button {
	padding: 0 .3em;
	overflow: visible;
}

Now you can see that narrowing the button eliminated the rendering problem for the second case, and reduced it for the third one.

I was able to enjoy the sensation of victory over the digital enemy exactly until the moment when I formatted the form containing the wide button into a table. Voila:

Although the buttons are displayed with their correct width, they take up space originally reserved for their. The problem can be solved by setting width: 0. But superior browsers (Opera, Firefox) do indeed respect the zero width, so that we are forced to use the IE-only hack. And that's already a well-known story. Either we use the improved “underscore hack”, i.e. =width:0 (for IE7 it's necessary to replace the underscore with the e.g. equals sign), or to separate the stylesheet for IE using conditional comments.

I spent some time googling other solutions. Jehiah Czebotar went through the same battle as I did and with the help of his readers he found a very similar result, yet with an extra elegant workaround.

Here is the solution:

/* IE stretched button bug workaround */

input.button {
	padding: 0 .25em;
	width: 0; /* for IE only */
	overflow: visible;
}

input.button[class] { /* IE ignores [class] */
	width: auto;
}

The trick lies in differentiating out the “better browsers” from IE7 using a valid way. Then we don't need the CSS “equal sign hack” or an extra stylesheet file. You can then use the code for all the browsers. Enjoy!

Kindly translated by Pinus & Adzio & Sovick4. Thank you!