same space within a button....

[Twelvethman]

I have a number of buttons within a form...

<input type="submit" name="AAAAAAAA" value="AAAAAAAA" class="button1">
<input type="submit" name="BBBBB" value="BBBBB" class="button1">
<input type="submit" name="CCC" value="CCC" class="button1">

Currently my button style is as follows:

.button1 {
BACKGROUND-COLOR: #E0E0E0;
BORDER: 1px solid #C6C6C6;
COLOR: #B30000;
FONT-FAMILY: Verdana, sans-serif;
FONT-SIZE: 11px;
}

How can I adjust the style of this button so that I have the same amount of space (like maybe 3 px) before and after the text within the button irrespective of the length of the button's value.

Right now I see that this space just to the left and right of the button's value is larger for the "A" and "B" buttons than it is for the C button - and I would like all three to be the same.

Thanks in Advance!

[Ben@WEBProp]

Do this:

.button1 {
BACKGROUND-COLOR: #E0E0E0;
BORDER: 1px solid #C6C6C6;
COLOR: #B30000;
FONT-FAMILY: Verdana, sans-serif;
FONT-SIZE: 11px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px
}


Play around with the px amounts on the padding and see if that does the trick.

Your welcome...in post-advance?

-Ben

[Twelvethman]

thanks for getting back so promptly... it did not work...

Here is what my style sheet looks like:

.button1 {
BACKGROUND-COLOR: #E0E0E0;
BORDER: 1px solid #C6C6C6;
COLOR: #B30000;
FONT-FAMILY: Verdana, sans-serif;
FONT-SIZE: 11px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px
}

The buttons in which the value has a longer length (for example "Administrative services") have more space to the left and right of the value text than the button that those that are shorter ( for example "Web"). It would be nice if the space were the space for both the buttons....

[Twelvethman]

..BTW I am using Explorer 5.5 on W2K... if that makes a difference....

[Ben@WEBProp]

Do you have an example that I could look at? Either on the web or as a zip file? If so, throw me a link or attachment and I will look at it during my lunch break (lunch starts at 12:00 PST).

-Ben

[Twelvethman]

Sure..appreciate your efforts....
Here is the link...
Test Page (http://www.northwestcollege.edu/SiteSummary/NavTest.cfm?SortKey=CRD&ViewType=Web)

As you can see some of the starting buttons have more of a cushion before and lafter their text than the shorter buttons...

[Twelvethman]

The style sheet is at:

Style Sheet file (http://www.northwestcollege.edu/SiteSummary/Includes/styles.css)

[Ben@WEBProp]

Oh! I think I see what you mean!

So let me get this straight:
You want each of the buttons on your "navbar" to be of equal length.

I'll walk you through the solution that I see, but let me know if I have it all wrong...still...

Ok, so there is this one attribute that you need to add to your <td> tag. It is called width="". So now you want to replace each of your<td> tags that represent one nav bar cell with
<td width="x">blah blah all your info blah blah</td>

But how do you know what to substitute x with to make every cell equal? Well, I'm glad you asked! But first, before we go any further...set your table width to 100%...that tells the browser that the table goes 100% of the screen. Alrighty, now we move on. You have 4 buttons, right? Then your equation is easy:
100% divided by 4 (buttons) = 25% for each button.

Now we have the final:
<td width="25%">info info submit all that good stuff</td>

If you do that for every cell, it SHOULD work...but lemme know if it doesn't...

I would test it out myself, but the craps table City Club Casino seems to be calling my name!

-Ben

[Twelvethman]

Thanks for taking the time - but I do not want the buttons on the navbar to be of equal length. Sorry if this sounds so confusing. The reason I do not want it to be of equal length is that then the button with the small text of Web would be of the same width as that of "Administrative Services" and that would be ugly. I want the "padding" to be of the same dimensions. In other words if the left and right padding is 5 px, then, the overall width for "Administrative Services" button is more than the button for "Web", but the grey "buttons space" around these two different texts would be the same.

Figuratively speaking:

{grey area 5px}Adminstrative Services{grey area 5px}
{grey area 5px}Web{grey area 5px}

I hope this clarifies things better. I really thought your padding suggestion would put things in place...

[Ben@WEBProp]

I am pretty sure I can figure it out if you give me 24 hours...
I will try to work on it tonight, and see if I can't get you some good results by tomarrow...Someone else may already have a solution by then, but I just can't work on it while I'm at work...it's just not worth getting fired for :D !

So if you can wait till either 8:00 or 12:30 tomarrow, good.

[AaronW]

I'm pretty sure that's just another IE rendering bug. What you're explaining is what's supposed to be normal behaviour for buttons. If you view you page in Mozilla/Firebird, you'll notice it looks exactly the way you want it ;)

My only suggestion would be to use another method, like perhaps use styled table cells with onclick and onmousedown events as opposed to <input /> or <button> objects.

[meow]

You have to set the width individually for each button. Just see to it that you use em or ex so the buttons resize with the text in browsers that allow that.

input { font: 14px Arial, sans-serif; width: 32ex }

<input type="submit" value="College Relations & Development">

Also get rid of the fixed table width or the effect will be lost.

[AaronW]

Originally posted by meow
You have to set the width individually for each button. Just see to it that you use em or ex so the buttons resize with the text in browsers that allow that.

input { font: 14px Arial, sans-serif; width: 32ex }

<input type="submit" value="College Relations & Development">

Also get rid of the fixed table width or the effect will be lost.

http://www.aaron-wright.com/cf/1.html

Just makes all the inputs the same size :S

[meow]

But he doesn't want them to be the same size. He wants them to be the same size as their captions. Or I can't read.

<edit>
Typo! :o

[MotherNatrsSon]

Try putting style="margin=0px; padding=0px" into the body tag on your page. Inline CSS. See if that helps.

MNS

edit: assuming you have already removed the fixed table width and let the content determine the size of the table???

[meow]

:eek: :confused: :confused: :confused:

[AaronW]

Originally posted by meow
But he doesn't want them to be the same size. He wants them to be the same size as their captions. Or I can't read.

<edit>
Typo! :o

You have it right, but the code you gave him makes them all the same size ;) That link I gave was just a page demonstratiing the code you gave him :p

[meow]

My example only had ONE input. I said: "set the width individually for each button". I trust Twelvethman can figure out how. :rolleyes:

[AaronW]

Ooooooh. Ha!

I gotcha. I still think it'd be a heck of a lot easier to just use a table with styled TDs and onclick events etc.

Not much point for buttons unless you need a form to submit something.

[Twelvethman]

Hello All


Thank you for your time. I am in the midst of meetings today. So I will test out your suggestions later on today.

I really do appreciate all the time and effort.

A couple of quick points...
1.AaronW has it correct - I want the width of the button to change depending on the size of the caption.
2.I cannot set the width individually because the buttons are generated dynamically out of a database using coldfusion.
3. I am using the buttons to pass variables as hidden fields - wihch makes life a lot easier for me rather than url variables (now come to think of it url variables are looking pretty tempting!).

Will send an update later today.

Thanks again!

[wac]

I'm interested in your reply as I have the exact same situation.
I cannot set the width of the buttons since the text is translatable. I noticed that opera does it right but neither netsacpe nor IE does. oh well.

[AaronW]

http://aaron-wright.com/cf/2.html

That's just tables and CSS. Can obviously be adjusted in any and every way. And if you want to pass values to hidden fields, it'll work just like any button, just use the same onclick events and everything, and it'll work the same. If you want, I can go ahead and write an onmousedown event to make the cells look "depressed" like a button would when clicked.

I'm pretty sure you won't have much luck using <input type="button" />. If someone else can think of a way, then that'll be cool.

[wac]

Well, I was using button because of accessibility issues. Button will handle things like tabbing, drawing of the focus box, and the 'title' attribute. However, can't anchor do the same things? Does an anchor tag allow the user to get focus by tabbing to it, and does it draw the focus box???

[wac]

Is it ok to have an anchor this complicated?? eg can arbitrary HTML be inside an anchor tags body?

The table in the body provides the border images for the button
look. The tabbing, focus box, and size around the text works fine, but the javascript stuff isn't working. I'm not sure if there's just too much stuff inside the anchor, or there's something else I messed up.

<a title='hide detail'
href='javascript:hide_details("detail", "");void 0'>

<table cellpadding='0' cellspacing='0' >
<tr>
<td class='btntl'> </td>
<td class='btntm'> </td>
<td class='btntr'> </td>
</tr>
<tr>
<td class='btnlm'> </td>
<td class='btnmm' > hide detail </td>
<td class='btnrm'> </td>
</tr>
<tr>
<td class='btnbl'> </td>
<td class='btnbm'> </td>
<td class='btnbr'> </td>
</tr>
</table>

</a>

[meow]

No.

[AaronW]

http://aaron-wright.com/cf/2.html

You CAN cycle through <a> tags with TAB. Not sure if they support the tabindex attribute though. Check that out at w3c.org or something :S

The page now uses titles and uses onclick events to move around. Might be wise to wrap the text of each box with <a href="hrefPage.html"></a> too, so search engines don't ignore your navigation ;)

[ronaldb66]

Seems like an awful lot of code bloat just to hide parameters in a query string... :rolleyes:
How about Clean URLs with Apache and PHP (http://www.evolt.org/article/Making_clean_URLs_with_Apache_and_PHP/18/22880/) ?
At least you can use simple a elements and style them all over the place! :thumbsup:

[AaronW]

That article seems to be oblivious of Apache's mod_rewrite...