How to align value texts on button?

  • ljCharlie
  • Proficient
  • Proficient
  • No Avatar
  • Joined: May 15, 2003
  • Posts: 343
  • Status: Offline

Post May 25th, 2004, 10:50 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 25th, 2004, 10:50 am

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 25th, 2004, 10:54 am

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
CSS website design tutorials
  • ljCharlie
  • Proficient
  • Proficient
  • No Avatar
  • Joined: May 15, 2003
  • Posts: 343
  • Status: Offline

Post May 25th, 2004, 11:02 am

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
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 25th, 2004, 11:23 am

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.
CSS website design tutorials
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post May 26th, 2004, 4:42 am

Would margins do anything in IE?
Pixel Acres V2
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post May 26th, 2004, 5:05 am

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">
Free Programming Resources
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 26th, 2004, 5:15 am

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....
CSS website design tutorials
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post May 26th, 2004, 5:42 am

Maybe just use type="image" instead of submit and then make the image look however you want.
Free Programming Resources
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 26th, 2004, 5:47 am

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.
CSS website design tutorials
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post May 26th, 2004, 6:37 am

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.
Free Programming Resources
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 27th, 2004, 7:40 pm

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
  • No Avatar
  • Joined: May 17, 2004
  • Posts: 55
  • Loc: Deer Park, Texas
  • Status: Offline

Post May 27th, 2004, 9:35 pm

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 157 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.