Changing Width of Input Buttons

[keyplyr]

(I posted this question in another thread, but I still cannot resolve it.)

I have three input buttons (displaying text) across the page. The width of these buttons expands too wide for my design. I contained them in table cells, but they force the width beyond the table dimensions.

So far, I have tested only with IE6/ME. Is this IE specific? Is there a way to reduce the margin on each side of the button text, thus reducing the width of the button?

CSS

input.grn {
background:#699;
color:#000;
font:12px verdana, arial, sans-serif;
border:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
}

HTML

<table width="600" border="0" cellpadding="0" cellspacing="9" align="center"><tr>

<td width="175" valign="top">
<form action="/my_page.html" method="get">
<input type="submit" value="Some Text" class="grn"></form></td>

<td width="200" valign="top">
<form action="https://my_domain.php" method="get">
<input type="hidden" name="sessid" value="<?php echo $mysessid?>">
<input type="submit" value="More Text" class="grn">
</form></td>

<td width="225" valign="top">
<form action="my_page.php" method="get">
<input type="submit" value="Even More Text" class="grn">
</form></td></tr>
</table>

[Purple Martin]

I'm fairly sure you can specify an exact width for a button, using the style attribute:

style="width: 150px;"

Of course, if the text size can be changed by the user (like it should be) then your button may not always be wide enough. You could try playing with ems instead of pixels to make the button width relate to the text size (I don't know if this will work, it's just an idea to try).

[MonkeeSage]

How about:

CSS:

input.grn {
background: #699;
color: #000;
font: 12px verdana,arial,sans-serif;
border: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
min-width: 50px;
max-width: 50px;
width: 50px;
}

Note: You could probably also get rid of the class attributes and change the way you are addressing the buttons in your stylesheet:

input[type="submit"] {
background: #699;
color: #000;
font: 12px verdana,arial,sans-serif;
border: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
min-width: 50px;
max-width: 50px;
width: 50px;
}

I'm not sure if IE supports this method however.

Shelumi`El
Jordan

S.D.G

[keyplyr]

Thank you Purple Martin, that was what I needed. I had tried just a width=X attribute in the input tag which didn't work; hadn't considered inline style.

And thanks MonkeeSage for the min-width and max-width ideas.