My buttons have white space I want to get rid of..

[ggallen]

I'm creating a table of names 3 wide, each <TD> element
will be the name inside a button, no problem.

I wanted each button to be left justified, no problem.

However, some buttons have a lot of blank areas to
the left and right of the button value, which makes
the name display very awkward, as they are not left
justified.

How do I get rid of the preceeding white space on the
buttons?

Right now my <TD> looks like....

<TD WIDTH=33% ALIGN="LEFT">
<INPUT TYPE="BUTTON" NAME="BUTTONx" VALUE="SOME NAME">
</TD>

Now each Button will be uniquely named where the "x" is a number starting with 1.

The button will look like "[ SOME NAME ]"
where as I want "[SOME NAME]"

Thanks
George

[ggallen]

OK. I've made my text left justified by adding in

STYLE="text-align: left" to my <INPUT TYPE="BUTTON..>

That got all the names lined up. Now

I still havn't figured out how to get all that extra
white space (now on the right side of the button
to go away...)

George

[ggallen]

For now, I've worked around this by adding:

border-top: 0px ; border-bottom: 0px ; border-left: 0px ; boder-right: 0px

To my style. I eliminates the "button" around the text
so now my white space blends into the background of
the table cell.

I really didn't need the button, so it won't affect
the functionality of the application.

Very intresting way to make an "invisible" button
by setting the borders to 0 pixels....

Still trying to figure out how to get rid of all that extra
space however...

George

[cheesebagpipe]

Instead of aligning the button text, try explicitly setting a width. Make a CSS class:

<style type="text/css">

input.button {
width: 30px;
}

</style>

You can also specify fonts, colors, etc. as shown here. Then:

<input type="button" class="button"......

Adjust your table layout as necessary. Individual rules can be set inline (in your HTML).

[ggallen]

the problem with setting the button width, is that
each button needs to be a different width, depending
on the length of the name.

And it seems that the text is truncated at the width
and not wrapped to new line on the button, so I
would lose text.

I never realized this before, but the more text that is on
a button, it seems the more padding there is left and right
of it.

What I want is a button the same width as the text, with
only a marginal amount of padding left and right.

Converting pixels to characters would prove to be a difficult
task, esp if the font is using proportional spacing...

George

[ggallen]

However, having the button width take up the entire
cell space doesn't look that bad, now each button
is uniform in length.

This seems to look better than varying the button
size So I'll take that.

I'd still like to know how to get rid of the padding however.

George

[cheesebagpipe]

each button needs to be a different width...

That's why I added this:

Individual rules can be set inline (in your HTML).

It's not possible - without seeing your layout - to form an opinion as to whether you'd be better off with same-sized buttons (often more orderly looking) or different sized, text-hugging ones. If you set font-size - particularly in pixels - you can be reasonably sure that the size of the button you specify will display properly, showing all the text, on user's systems. A little extra space provided gives you some leeway. When left to their own devices, different browser/OS combinations style form controls in their own, sometimes peculiar, way.

[ggallen]

how would I go about making text-hugging buttons?

I tried changing the font-size to pixels but the
button still has the extra padding.

Thanks
George

[cheesebagpipe]

Post the (relevant) HTML.

[ggallen]

It's a little difficult, as the HTML is produced dynamically. but in
general....

<TABLE ID="NAMES" WIDTH=90% BORDER=0 ALIGN="CENTER">
<TR>
<TD WIDTH="33.3333%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" NAME="BUTTONS0014" VALUE="NAME1" ALIGN="LEFT" STYLE="TEXT-ALIGN: LEFT; FONT-SIZE: 10PX">
</TD>
<TD WIDTH="33.3333%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" NAME="BUTTONS0013" VALUE="NAME2" ALIGN="LEFT" STYLE="TEXT-ALIGN: LEFT; FONT-SIZE: 10PX">
</TD>
<TD WIDTH="33.3333%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" NAME="BUTTONS0016" VALUE="NAME3" ALIGN="LEFT" STYLE="TEXT-ALIGN: LEFT; FONT-SIZE: 10PX">
</TD>
</TR>
<TR>
<TD WIDTH="33.3333%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" NAME="BUTTONS0015" VALUE="NAME4" ALIGN="LEFT" STYLE="TEXT-ALIGN: LEFT; FONT-SIZE: 10PX">
</TD>
</TR>
</TABLE>

[cheesebagpipe]

See if this helps a bit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

input.button {
              width: 43px;
              font: 200 11px arial,verdana,helvetica,sans-serif;
              color: ghostwhite;
              border: 1px navy solid;
              background: steelblue;
             }

</style>
</head>
<body>
<TABLE ID="NAMES" WIDTH=90% BORDER=0 ALIGN="CENTER">
<TR>
<TD WIDTH="33%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" CLASS="button" NAME="BUTTONS0014" VALUE="NAME1">
</TD>
<TD WIDTH="33%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" CLASS="button" NAME="BUTTONS0013" VALUE="NAME2">
</TD>
<TD WIDTH="33%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" CLASS="button" NAME="BUTTONS0016" VALUE="NAME3">
</TD>
</TR>
<TR>
<TD WIDTH="33%" ALIGN="LEFT">
<INPUT TYPE="BUTTON" CLASS="button" NAME="BUTTONS0015" VALUE="NAME4">
</TD>
</TR>
</TABLE>
</body>
</html>

[ggallen]

Well, The buttons are a nice color. I think you assumed
that the names were going to be NAME1 NAME2 NAME3
and NAME4.

However, the # of names could be hundreds, and their
actual names would display, varying in length from 1
to 30 characters in length.

To see what I mean look at:

<INPUT TYPE="BUTTON" NAME="BUTTON1" VALUE="SMALL"><BR>
<INPUT TYPE="BUTTON" NAME="BUTTON2" VALUE="A LITTLE LARGER"><BR>
<INPUT TYPE="BUTTON" NAME="BUTTON3" VALUE="AND THIS ONE IS EVEN BIGGER">

Now look at the buttons...Why does it put in more padding
when the length of the value gets longer? There doesn't
seem to be any way to control the padding, unless you can
exactly calculate the button width that is needed, which
proportional spacing really makes a mess of.

George

[Danne]

You need to set cellspacing and cellpaddong to "0" in the table:

<TABLE ID="NAMES" WIDTH=90% BORDER=0 ALIGN="CENTER" cellspacing="0" cellpadding="0">

[ggallen]

Changing the cell spacing/padding only got rid of few
pixels of space between the border area and the
start of the button.

I'm trying to get rid of the padding inside the button.

George