Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Post the (relevant) HTML.

  • #10
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #11
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See if this helps a bit:
    Code:
    <!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>

  • #12
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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">
    /Daniel

  • #14
    Regular Coder
    Join Date
    Jul 2003
    Location
    NJ - #29 if you must know
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •