How do I adjust the width of a "submit" button

[Robert S]

I have a page that has buttons with A-Z on them. They look great in
firefox but in IE the width is variable. How do I set the buttons to a
constant width?

The html code looks like this:

<input name="letter" type="submit" value="A">
<input name="letter" type="submit" value="B">
<input name="letter" type="submit" value="C">

I have tried setting "size" and "width" but these don't make any
difference.

 

[Steven Saunderson]

I have a page that has buttons with A-Z on them. They look great in
firefox but in IE the width is variable. How do I set the buttons to a
constant width?

I'm not sure if this is relevant but I recently had a problem where IE
made the buttons much wider than necessary for the text. Setting
overflow to visible (e.g. style="overflow:visible;") fixed this problem
for my case. The author of the fix also suggested setting the width to
auto (e.g. style="overflow:visible; width:auto").

 

[Jim Moe]

I have a page that has buttons with A-Z on them. They look great in
firefox but in IE the width is variable. How do I set the buttons to a
constant width?

input[type=submit] { width: 5em; }

 

[Jonathan N. Little]

I have a page that has buttons with A-Z on them. They look great in
firefox but in IE the width is variable. How do I set the buttons to a
constant width?

input[type=submit] { width: 5em; }

Unfortunately IE does not recognize attribute selector, works for
everybody else you will have to make a class

..myButtons { width: 5em; }

<input class="myButtons" type="submit" value="A">
<input class="myButtons" type="submit" value="B">
....

 

[Jukka K. Korpela]

I have a page that has buttons with A-Z on them. They look great in
firefox but in IE the width is variable.

Whatever they look like, it's probably a wrong approach. My crystal ball
tells that they are actually links, and even if they aren't, there are
better approaches.

Suppose I wanted to select "X" . You are forcing me to use the tab key over
twenty times to reach the right button. Oh, I'm postulating that I cannot
use the mouse, for one reason or another.

It's probably better to have a single-character input field. It's much
faster to type just the character you want and then press Enter.

 

[Jim Moe]

[...] How do I set the buttons to a
constant width?

input[type=submit] { width: 5em; }

Unfortunately IE does not recognize attribute selector, works for
everybody else you will have to make a class

Crap, that's right.
I remember being excited about the selector because without it the rule
was applied to all input types, even radio buttons. A 5em radio button
looks strange.
I've used your approach which works well. I have also used a <div> and
cascaded <input> within it being careful to have only the one input type.

 

[Jonathan N. Little]

[...] How do I set the buttons to a
constant width?

input[type=submit] { width: 5em; }

Unfortunately IE does not recognize attribute selector, works for
everybody else you will have to make a class

Crap, that's right.
I remember being excited about the selector because without it the rule
was applied to all input types, even radio buttons. A 5em radio button
looks strange.
I've used your approach which works well. I have also used a <div> and
cascaded <input> within it being careful to have only the one input type.

Yes many times I want to group my submit/reset buttons so I put in a div
and style accordingly

..buttonbar { margin: 1em; padding: .5em; border-top: 4px double #000;
text-align: center; }
..buttonbar INPUT { whatever you want to do for your submit buttons }

<div class="buttonbar">
<input name="doit" type="submit" value="&lt;Previous">
<input name="doit" type="submit" value="Next&gt;">
</div>

 

[Robert S]

[..from the original poster]

Thanks for the comments folks. This seems to work fine for my
purposes:

<input style="width: 2em" name="letter" type="submit" value="B">

Robert.

 

[Jonathan N. Little]

[..from the original poster]

Thanks for the comments folks. This seems to work fine for my
purposes:

<input style="width: 2em" name="letter" type="submit" value="B">

Using inline style ^^^^ over a class sort of defeats the advantage of
CSS and separation of presentational bits from your markup.

Think about this, what happens if you decide that 2em is not wide
enough? With your inline style you must change each and *every* INPUT to
add the new value, and from your example it sounds like you will have
several, but if you have a class definition you would not have to touch
the HTML, just the stylesheet to change the value in *one* place!

..buttonbar INPUT { width: 3.5em; }