Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

aliging form buttons.....

Status
Not open for further replies.
Extras

Extras

Technical User
Nov 16, 2001
232
US
I have table with a set of form buttons. These buttons are of different length because their values are different. However for some reason, these buttons are not center aligned within their cells. The cells expand to the width of the widest buttons, but the smaller buttons within that column are left aligned. Is there a workaround to this? In the sample code below, the buttons in the second row force the columns to expand and the buttons in the first row are not displayed in the center of the cells despite their cell attribute.

Any help would be appreciated!


<table>
<tr>
<td width=&quot;125&quot; align=&quot;center&quot;><form action=&quot;Page1.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Page 1A&quot; class=&quot;buttonA&quot;>
</td></form>
<td width=&quot;125&quot; align=&quot;center&quot;><form action=&quot;Page1B.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Page 1B&quot; class=&quot;buttonA&quot;>
</td></form>
>/tr>
<tr>
<td width=&quot;125&quot; align=&quot;center&quot;><form action=&quot;Page2.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Go to Page 2A&quot; class=&quot;buttonA&quot;>
</td></form>
<td width=&quot;125&quot; align=&quot;center&quot;><form action=&quot;Page2B.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Go to Page 2B&quot; class=&quot;buttonA&quot;>
</td></form>
</tr>

/table>
 
Sort by date Sort by votes
Maybe this would help.

<html><head>
<style>
.butw {width:130px;margin:0px;text-align:center}
</style></head><body>
<input class=&quot;butw&quot; type=&quot;button&quot; value=&quot;Caption One&quot; />
<input class=&quot;butw&quot; type=&quot;button&quot; value=&quot;Caption Two&quot; />
<input class=&quot;butw&quot; type=&quot;button&quot; value=&quot;Caption Three&quot; />
</body></html>

Clive
 
Upvote 0 Downvote
it &quot;kinda&quot; works. Kinda because it seems to bring all the buttons to the same width - so I would neet to make them all the same size? Wondering if there was a way around that - keep them different sizes and still center aligned...

 
Upvote 0 Downvote
Try skipping the width. ie:

<html><head>
<style>
.butw {margin:0px;text-align:center}
</style></head><body>
<input class=&quot;butw&quot; type=&quot;button&quot; value=&quot;Caption One&quot; />
<input class=&quot;butw&quot; type=&quot;button&quot; value=&quot;Caption Two&quot; />
<input class=&quot;butw&quot; type=&quot;button&quot; value=&quot;Caption Three&quot; />
</body></html>

Clive
 
Upvote 0 Downvote
:( that did not work either. For now I am taking the option of going with a widest button and keeping it common size for all.

Would be interesting to know why that alignment does not work...?
 
Upvote 0 Downvote
<tr align='center'>

instead of giving align='center' in <td> try giving it in <TR>...


Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
I take it that it is messing up your layout with the rest of the table.

Here's an idea:


<tr>
<td colspan=&quot;4&quot; align=&quot;center&quot;>

<form action=&quot;Page1.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Page 1A&quot; class=&quot;buttonA&quot;>
</form>

& n b s p ; 

<form action=&quot;Page1b.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Page 1B&quot; class=&quot;buttonA&quot;>
</form>

& n b s p ;  

<form action=&quot;Page2.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Go to Page 2A&quot; class=&quot;buttonA&quot;>
</form>

& n b s p ;  

<form action=&quot;Page2b.htm&quot; method=&quot;post&quot; target=&quot;_blank&quot;>
<input type=&quot;submit&quot; NAME=&quot;button&quot; VALUE=&quot;Go to Page 2B&quot; class=&quot;buttonA&quot;>
</form>
</td>
</tr>
[/code]
Therefore you are merging the amount of cells wide in the table in to one and the buttons should be placed next to each other. The &quot;& n b s p ;&quot; is used to provide spacing.
(just take the spaces out between the letters of the &quot;& n b s p ;&quot;)

Hope this helps.

Reality is built on a foundation of dreams.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
718
3esolar
3
pendle666
  • Locked
  • Question
contact form buttons not right on iPhone 4 HTML/CSS 2
Replies
9
Views
222
pendle666
pendle666
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
170
PeDa
PeDa
ghbeers
  • Locked
  • Question
Viewing form through portal messing up .css formatting
Replies
4
Views
138
ghbeers
ghbeers
Everton1Blue
  • Locked
  • Question
How to display user error in form field
Replies
2
Views
182
Everton1Blue
Everton1Blue

Part and Inventory Search

Sponsor

Back
Top