Spacing

beginning and end of input tag

[Alternative Future]

Hi all,

Working with the form element <input type=button>
Has anyone ever came accross this issue I have found?

If we put the value of the input tag to 'Ok' and an other one to 'Create a widget', the spacing at the beginning and end of the values are increasing i.e. for the value 'Ok' we have roughly 4px padding left and right for the 'Create a Widget' we have roughly 8-10px padding.
I have allready tried the obvious of putting padding, padding-right & left into the style sheet to have a default value at either end of the value, but, this doesn't do anything!
Also tried letter-spacing with no joy there either.

Anyone came accross this and found a fix/hack?

Many thanks and kind regards,

-George

PS the fix need only apply to IE

[kaled]

Browsers probably use the the Windows API function GetTextExtentPoint32 to calculate the required width and height of buttons. This function may be imperfect.

It may be possible to adjust the padding with stylesheets but I would not expect to be able to do so. (I would expect the padding, margin and border values to be applied outside the button or ignored).

Your options are:-
- Forget about it (recommended).
- Add extra space at start and end of value, e.g. ' ok '.
- Use graphics.
- Use text links with fancy borders and backgrounds, etc.
(by adjusting the left-right/top-bottom padding etc, you could simulate a button press I guess - but is it really worth the trouble?)

Kaled.

[Alternative Future]

Hi Kaled,

Firstly many thanks for taking the time out to answer this question.

>>Browsers probably use the the Windows API
I had a sneaky feeling this would be the case, same as the <select> (which we have had a few nightmares with in the past)

Your options are:-
- Forget about it (recommended).
- Add extra space at start and end of value, e.g. ' ok '.
- Use graphics.
- Use text links with fancy borders and backgrounds, etc.
(by adjusting the left-right/top-bottom padding etc, you could simulate a button press I guess - but is it really worth the trouble?)

1) Forget about using it in the App is a cannot do senario. Forget about it as in turn a blind eye to it is an idea though! ;-)
2) Adding extra spaces would involve quite a bit of work as most of the buttons come from server-side processing using Struts (don't really want to be adding extra demand on the server for basic formatting issues)
3) Can't do
4) We just made the move from the basic anchor text links to buttons so that the App had the same look and feel to all buttons. There was a mix between the two before and we just couldn't get the style to match perfectly (the text between the custom looking link and the input button was 1px out in the text alignment, sounds like nothing i know but it was a big deal), so made a decision to drop the anchor and build a custom tag to replicate the <input type=button> in Struts.

But anyway again I thank you for placing the food in my head for thought!

-George