September 1, 2004

11:54 AM

Quickie Gecko-CSS question - not finding useful help on Google. How to align the text (value) of a form button?

This looks great in IE (aligned right), but always reverts to center in Moz/Firefox. Anyone find any clever workarounds (I really don't wanna resort to images)
posted by kokogiak to (16 comments total)

Oh dear - the post got munged (I shoulda posted this inside) - try again here:

[input type="button" style="width:120px;text-align:right;" value="Click Me"/]
posted by kokogiak at 11:55 AM on September 1, 2004

The text appears aligned left in my browser, and I'm using Firefox.
posted by FunkyHelix at 11:56 AM on September 1, 2004

Try looking here (this is supposed to be a button - can't post a button to askMe correctly I guess)
posted by kokogiak at 11:58 AM on September 1, 2004

Ah, okay. I see what you mean. The text is centered in the button. Alas, no idea how to help. Sorry.
posted by FunkyHelix at 12:02 PM on September 1, 2004

I'm using Firefox, and it's a button aligned to the left at the top of the screen.
posted by jasper411 at 12:03 PM on September 1, 2004

Not the button - the text within the button. Sorry to be unclear.

Desired:
|      Click Me|

Mozilla gives:
|   Click Me   |
posted by kokogiak at 12:06 PM on September 1, 2004

I think this is one of those IE-specific CSS quirks, like coloring the scrollbar. The problem is that you are trying to apply styling to the element's attributes (the "value=" part), not the element's contents.

However, this is interesting. Instead of "[input type=..."] use "[button type="submit"]This is a test[/button]" and change your CSS selectors to suit. This gives you a sort of weird widget that is style-able.
posted by adamrice at 12:32 PM on September 1, 2004

I've had this problem before, and I could never get it to do anything but be centered.
posted by mathowie at 12:34 PM on September 1, 2004

A kind reader sent me a link - apparently a long-known issue (bug?) - http://bugzilla.mozilla.org/show_bug.cgi?id=138403. Sigh.
posted by kokogiak at 12:38 PM on September 1, 2004

But there does seem to be a workaround at the end of that bugzilla thread, yes? As long as you don't care to control the width of your button, that is.
posted by gleuschk at 12:54 PM on September 1, 2004

There's the rub, I do care about the width. Will have to let that go I guess.
posted by kokogiak at 1:28 PM on September 1, 2004

Y'know, this is a shitty hack, but what about dropping the text on top with positioning? The only problem there would be controlling the width of the button. And then the click event. So that's not so good. You could style something to look like a button and then use JavaScript to submit the form (or whatever). Not perfect, but it'd work.
posted by yerfatma at 5:25 PM on September 1, 2004

Thanks yerfatma - I was hoping to go with simple, but I'll likely either have to resort to a hack like that or just let 'em lie unstyled.
posted by kokogiak at 6:18 PM on September 1, 2004

what about using something monospaced and using some php function to count the width and fill a string of blanks (like your text example) to get it to line up on the right?

function rightAlign($text,$width){
$blank_pixel_width = 10;
$text_width = strlen($text);
$number_of_blanks = ($width - $text_width)/$blank_pixel_width;
for ($i = 0;$i< $text_width;$i++){br> $blank_string = $blank_string + " ";
}
$text = $text + $blank_string;
print [input type="button" style="width:"$width"px;" value=$text/]
}

I'm sure thats a mess..but maybe you can figure out what I'm talking about. I'm also sure you probably don't wanna go monspaced.
posted by darkpony at 1:58 AM on September 2, 2004

oops... I think
$text_width = strlen($text);
should be
$text_width = strlen($text)*10;the pixel_width
posted by darkpony at 2:01 AM on September 2, 2004

I think the central problem here is that browsers often consider form widgets part of their own or their operating system's user interface (as Mozilla and Safari do, respectively). Opera even lets you the user choose whether or not form elements can be styled.

Once you get beyond that, it's likely that nobody on the CSS Working Group imagined a need to style the alignment of text on input. Did you try <div class="right"><input>, with a declaration of .right{ text-align: right; }? There's a tiny chance that the text-align might cascade down.
posted by joeclark at 5:04 AM on September 2, 2004