Form Buttons and IE

[jsark]

IE6 (and maybe other browsers, I don't know) appears to add extra space to the right and left of the text on submit buttons (on the button as padding, not outside).

The browser must calculate this extra space on a percentage basis, because as the submit button text grows, so does the space.

Does anyone know of a way to control/prevent this? I am able to control other values, such as css padding, but this extra space issue eludes me.

To see what I mean, create a submit button and assign a value of 'me'. Take note of the space to the left and right of 'me'. Now change 'me' to 'the quick brown fox jumped over the lazy cat', then look at the extra space.

[DrDoc]

Welcome to Webmaster World!

The problem is that the calculation is not linear. Unfortunately this means that the actual space added (in pixels) varies from font to font. It also varies from one size to another. On top of that, it varies from one amount of charactes to the other.

AFAIK there's no way of controlling this. Your only option is to explicitly set the width, but then you risk getting some characters cut off if the user changes the font size.

[dmorison]

The other problem with extended form buttons is that with XP's "Fisher Price" UI components; the default form button has anti-aliased corners which start to look stupid with anything longer than "Submit" written on the button.

[DrDoc]

Wow, it DOES look stupid! Haven't even noticed that before!

[celerityfm]

dmorison - indeed :(... I've seen professional sites let this slip.. theres not much to do about it as every browser renders the button differently anyways.

I'd recommend a CSS Button or something along those lines..

[madmac]

an easy solution would be to make your own form button images... will give you complete control over the look of the buttons and the buttons will look the same across all systems & browsers.

[MonkeeSage]

Cf. [webmasterworld.com...]

Jordan

[jsark]

madmac:

that is what i did to start with, but this turned into too many images. i'm trying to adopt a more standards-based approach, and shed as many images as possible, thereby lightening the load.

monkeesage:

thanks for the link. good info there. i knew i wasn't the first one to run across this...

[Shadows Papa]

dmorison, et al - you mean that people actually use the default XP look? Yikes! It was so ugly that the first thing I do after an XP install is go to the retro-look. I think the whole XP look is simplistic, childish and obviously meant for new computer users - the general public, not real folks. I made mine look more like W2K.
I use XP on one of my computers but can't tell you what buttons look like in XP.

It's also great to see I'm not the only one seeing that the way browsers render buttons is plain dumb. No one wants that extra space and what purpose does it serve?

Using images is not a great solution, either. It means another image to deal with and place "just so" in every browser and when your button sizes vary - meaning that out of 100 buttons, maybe only 2 are the same width (the text is different for every single button) that's also a lot of work.

This one baffles me - I'd love to know the "why" of the way browser people do their size calculations. It simply makes no sense. Why increase padding with more text, why not allow us to set a margin or padding like nearly every other element? Anyone here work for Microsoft?

Shadows Papa