Controlling width of a button

[kkernen]

I'm using this code to right align a button:

<div align=&quot;right&quot;><input type=&quot;button&quot; name=&quot;&quot; value=&quot;Long Menu Name&quot; class=&quot;button&quot; onClick=&quot;location='menu.htm';&quot;></div>

The button works fine, but how can I customize the width?
It automatically adds 1/2" of gray space on both ends of the button name (value), making the button 1" wider than it needs to be. My available width is limited, so I need to trim this wasted space, if possible. Thanks!

 

[jaredn]

i would use a style:

&quot;><input type=&quot;button&quot; name=&quot;&quot; value=&quot;Long Menu Name&quot; class=&quot;button&quot; onClick=&quot;location='menu.htm';&quot; style=&quot;width:50px&quot;> jaredn@eae.net -

http://webfx.eae.net

 

[kkernen]

Thanks jaredn, using an inline style works great. Do you know if there's a way to create a style in a linked style sheet that will automatically adjust the width depending on the name of the button (value)?

 

[MikeBarone]

Sure, save the following text in a filename.css file:

button.b1 {
width:200px;
background : Aqua;
border : thick groove Black;
}
button.b2 {
width:300px;
background : red;
border : thick groove Black;
}
button.b3 {
width:400px;
background : green;
border : thin solid Black;
}


Then call the filename.css file using link command:
<LINK REL=&quot;stylesheet&quot; TYPE=&quot;text/css&quot; HREF=&quot;filename.css&quot;>

Or just add it to the top of the HTML page between <style> tags. Then call the classes directly

<input type=&quot;button&quot; class=&quot;b1&quot;>
<input type=&quot;button&quot; class=&quot;b2&quot;>
<input type=&quot;button&quot; class=&quot;b3&quot;> » » » » » »
Mike Barone

http://www.cgiscript.net

FREE and Pro CGI/Perl Scripts

FREE Scripts

http://www.cgiscript.net/scripts.htm