How to make buttons same size?

[longmatch]

Dear Friends:
I am designing a page using ASP. I would like to have several buttons in one part of the frame. I can not make then the same size and can not position them. Your help is highly appreciated.

Haijun

 

[Wullie]

Can you post more details??

From what you have mentioned, we would be guessing to give you answers..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[longmatch]

Generally the size of button control on HTML page is proportional to the value of the control (number of letters on the control). Do we have method to make them same size regardless of the number of letters.

Haijun

 

[starway]

Yes we do. You have to use CSS property named [tt]width[/tt]. Here's an example:

<style>
.btn1 { width: 150px }
</style>

. . .
<input type=&quot;button&quot; class=&quot;btn1&quot;>

Using CSS you can also define other settings like button color and text size/font/style.

good luck

 

[Wullie]

Starway,

This won't work in NS4.x.

Just thought I would mention as it is likely to look terrible..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[tsdragon]

Not only that, but when I used width on some buttons in NS 6 the stupid browser decided to make them stack vertically instead of leaving them both on the same line! I STILL haven't figured that one out!

My best advice, add

 

to either side of the shorter ones until they look about the same size as the longest one. It's not an ideal solution, but it works.
Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Wullie]

Hi Tracy, was that supposed to be a space??

Nothing appeared...

Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[tsdragon]

Duh, I guess I should have previewed that posting, but I put it in code tags and it STILL interpreted it. It should have said

 

. Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[tsdragon]

Oh well, I guess there's no reasonable way to make it work. That time I used

(an ampersand)amp;nbsp;

and it previewed correctly, but it STILL won't display correctly. Let's try it will a bunch of spaces:

& n b s p ;

Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Wullie]

LOL...

Leave a space between the letters, it is the only way that it appears.. Even though it appears in the preview, for some reason, this forum just makes a mess of it..

& n b s p ;

Remove the spaces...

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[KarveR]

Don't ya just love the way this thing PREserves code...NOT

[pre]&bnsp;[/pre] <-- test about here but we all *know* nothing will show up - or we'll get an added ; like in the php forum. ***************************************
Party on, dudes!

 

[Guest_imported]

so is there anyway to size buttons with more precision for cross-browser use? I am having the same problem. Also font sizes seem to vary from computer to computer. For instance, I use 3 buttons placed horizontally and then put a table below, making the width of the table the same as the width of the 3 buttons. However when viewed on another computer the widths are no longer the same.

 

[Wullie]

Hi mate,

If you want to use buttons then use & n b s p ; to make the buttons roughly the same size.

If you must have them exactly the same size, then use images instead..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[tsdragon]

I thought for a minute that karver had figured out a way to make TT display that darned code right, then I looked again and realized that he transposed the first two characters, so no wonder it didn't get mucked up.
Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[KarveR]

Doh! sussed, well spotted Tracy ***************************************
Party on, dudes!

 

[starway]

You can control font properties of the text appearing on button face. It works in all browsers including NN4.x

<style>
.btn1 { width: 150px;
font: bold 12pt verdana, arial, sans-serif }
</style>

This example works completely in IE5+, Opera 5/6, Mozilla/Netscape 6.
NN4.x shows the same font properties like all other browsers, but doesn't show the width specified in stylesheet.

You can also add color for text and backgrond, but this will work only in IE and Mozilla/Netscape 6.

Also, NN4.x is the only one that prevents button placement in one line. But I don't see any trouble here - use a simple table and you'll solve the issue.

good luck