...

View Full Version : My buttons have white space I want to get rid of..



ggallen
07-14-2003, 08:41 PM
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
07-14-2003, 09:01 PM
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
07-14-2003, 09:13 PM
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
07-14-2003, 09:17 PM
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 (http://www.outfront.net/tutorials_02/adv_tech/funkyforms1.htm). Then:

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

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

ggallen
07-14-2003, 09:26 PM
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
07-14-2003, 09:30 PM
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
07-14-2003, 09:36 PM
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
07-14-2003, 09:44 PM
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
07-14-2003, 09:45 PM
Post the (relevant) HTML.

ggallen
07-14-2003, 09:48 PM
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
07-14-2003, 10:10 PM
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
07-14-2003, 10:29 PM
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
07-14-2003, 10:43 PM
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
07-14-2003, 10:48 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum