How to align value texts on button?

Is there a way to align the value texts on a button? I have a list of buttons and there are in various lengths. The problem is, all the lables on the button, which is the value, are not align and I like to align the button lables.

Any suggestion is appreciated.

ljCharlie

align left, align right, align center, with an indent or without

Also how have you made the buttons, some code for them could be nice as it's easier to give an answer if we know what we are working from and towards

Many thanks for the quick response. Here's the code of the button.



I want to aligne the word "Hidden Status" to the left.

ljCharlie[/code]

Ah, I thought you meant like an image button navigation thing lol. Well anyway I'll it a go:

Thats bizarre, you can't tell it to just align left.

In mozilla, this works:

But no joy in IE

I'll try and have another look later if I get a chance.

Would margins do anything in IE?

This worked for me in IE 6/Opera 7 but no joy in FireFox/Mozilla:

well that doens't affect gecko browsers at all so combine the two and we're just looking for a fix for, oh - internet explorer again

@b_heyer, no. margins are on the outside, the margins would move the button and objects around it....

You could always overlay the text onto the button using some positioning, or try giving the button a label, then position that - I don't even know if you can give buttons labels :S

It doesn't look hopeful I'm afraid....

Maybe just use type="image" instead of submit and then make the image look however you want.

Someone the other day was talking about form objects being painted on by the OS in some browsers. I think a submit button is an example of this in IE, hence the fact that stylesheets don't seem to affect it.

An image button does look to be the best solution.

Well, you can use stylesheets on buttons for some things like colors, fonts and such, and IE would actually align the text although IE doesn't seem to allow setting the padding to 0px, while mozilla won't align the text but will set the padding to 0, so an image button is probably the way to go.

The annoying os-dependent thing that I have noticed is the drop-down control. Styles don't work at all on the little drop-down arrow in any of the major browsers on my windows system, although you can control the background-color and font color of the drop down list itself.

try css. set the button's class to class="btn". this should work.

input.btn{padding:2px 5px 2px 0;}

That'll set the top and bottom padding to 2px for a clean look, the right padding to 5px to push it to the left, and the left padding to 0 to get the text right on the edge.

I think this'll work. You might want to play with it a bit though.

I'm suprised you all havent thought of combining everyones ideas together.... i tested this code with IE, Netscape 7.1, Opera 7.5, and FireFox and it worked like a charm. Note: it is waaaay more noticeable in IE than anything else, but what can you expect?