buttons too wide

[David McDivitt]

When buttons are created they are often too wide for the text. The problem
is worse as text becomes longer. I want the same margin between border and
text for all buttons. Using style to adjust this value doesn't help. It
seems the button width is computed incorrectly, or by the wrong factor, for
the number of characters and font. Help would be appreciated. Thanks

 

[David McDivitt]

Date: Tue, 09 May 2006 10:34:09 -0500

When buttons are created they are often too wide for the text. The problem
is worse as text becomes longer. I want the same margin between border and
text for all buttons. Using style to adjust this value doesn't help. It
seems the button width is computed incorrectly, or by the wrong factor, for
the number of characters and font. Help would be appreciated. Thanks

I was able to resolve this using a label and style sheet with inset and
outset. The label computes width correctly. Buttons do not.

 

[Jim Moe]

When buttons are created they are often too wide for the text. The problem
is worse as text becomes longer. I want the same margin between border and
text for all buttons. Using style to adjust this value doesn't help. It
seems the button width is computed incorrectly, or by the wrong factor, for
the number of characters and font. Help would be appreciated. Thanks

Provide an URL showing a test case.

 

[David McDivitt]

Date: Tue, 09 May 2006 11:00:27 -0700


Provide an URL showing a test case.

Thanks Jim. There is no URL to show you. It is simple button syntax:
<input type="button" style="background-color:#EAEABA;" value="whatever">
The length of the button should be the length of value plus the margin. If
the text font length is not computed correctly, the length of the button
will not match the displayed text. Compare to the following:
<label style="background-color:#EAEABA; border-styleutset; height:10px">
whatever
</label>
Change "whatever" to increasingly longer values to see the problem.

 

[Jim Moe]

Thanks Jim. There is no URL to show you. It is simple button syntax:
<input type="button" style="background-color:#EAEABA;" value="whatever">
The length of the button should be the length of value plus the margin. If
the text font length is not computed correctly, the length of the button
will not match the displayed text. Compare to the following:
<label style="background-color:#EAEABA; border-styleutset; height:10px">
whatever
</label>
Change "whatever" to increasingly longer values to see the problem.

Well, no, I do not see the problem. <input> seems to have a builtin
padding that cannot be removed. But other than that, no matter how long I
make the text, the button correctly adjusts to contain it.
This is why I asked for an URL. Without it I cannot see what else there
may be that might be causing the behavior you describe. Often creating a
test case resolves the problem for you.

Here is the code I tested:
<http://sohnen-moe.com/test/t1.html>

Browser: Mozilla Seamonkey v1.0.1.

 

[David McDivitt]

Date: Tue, 09 May 2006 13:43:19 -0700
Lines: 29


Well, no, I do not see the problem. <input> seems to have a builtin
padding that cannot be removed. But other than that, no matter how long I
make the text, the button correctly adjusts to contain it.
This is why I asked for an URL. Without it I cannot see what else there
may be that might be causing the behavior you describe. Often creating a
test case resolves the problem for you.

Here is the code I tested:
<http://sohnen-moe.com/test/t1.html>

Browser: Mozilla Seamonkey v1.0.1.

I should have tried different browsers. With Firefox and Netscape the button
and label are the same length. With IE the button is longer. Thanks

 

[Andyza]

When buttons are created they are often too wide for the text. The problem
is worse as text becomes longer. I want the same margin between border and
text for all buttons. Using style to adjust this value doesn't help. It
seems the button width is computed incorrectly, or by the wrong factor, for
the number of characters and font. Help would be appreciated. Thanks

It's a bug in IE:
http://www.designdetector.com/bugs/ie6-stretched-button-bug.html

Possible solution:
http://jehiah.com/archive/button-width-in-ie
http://jehiah.com/archive/button-width-in-ie-revised

I had the same question just a few days ago. See the "Ugly button"
thread in comp.infosystems.www.authoring.html