How to align value texts on button?

  • ljCharlie
  • Proficient
  • Proficient
  • ljCharlie
  • Posts: 343

Post 3+ Months Ago

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
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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

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
  • ljCharlie
  • Proficient
  • Proficient
  • ljCharlie
  • Posts: 343

Post 3+ Months Ago

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

Code: [ Select ]
<input name="sbmHdnStat" type="submit" id="sbmHdnStat" value="Hidden Status">


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

ljCharlie[/code]
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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:
Code: [ Select ]
<input name="sbmHdnStat" type="submit" id="sbmHdnStat" value="Hidden Status"
style="padding-left:0px;padding-right:10px;">
  1. <input name="sbmHdnStat" type="submit" id="sbmHdnStat" value="Hidden Status"
  2. style="padding-left:0px;padding-right:10px;">

But no joy in IE :roll:

I'll try and have another look later if I get a chance.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Would margins do anything in IE?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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

Code: [ Select ]
<input name="sbmHdnStat" type="submit" id="sbmHdnStat" value="Hidden Status" style="text-align:left">
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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 :roll:

@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....
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Maybe just use type="image" instead of submit and then make the image look however you want.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • BinaryTox1n
  • Beginner
  • Beginner
  • BinaryTox1n
  • Posts: 55
  • Loc: Deer Park, Texas

Post 3+ Months Ago

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?
Code: [ Select ]
<input id="sbmHdnStat" name="sbmHdnStat" type="submit" value="Hidden Status" size="0" align="left" style="text-align:left;padding-left:0px;padding-right:15px;">

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 95 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.