How is a text button width set?

Discussion in 'HTML' started by Pengiun3, Oct 12, 2003.

  1. Pengiun3

    Pengiun3 Guest

    Hello,

    I have a table that includes a set of buttons with various text. I
    want the buttons in a column to all have the same width (of the widest
    button). I've been through several tutorials and even read a few sites
    source. I've not found the proper keywords.

    The following buttons have various widths. I'd like them to all have
    the width of the column. How should I change these?

    <input type=\"submit\" name=\"Change\" value=\"Change\">
    <input type=\"submit\" name=\"Delete\" value=\"Delete\">
    <input type=\"submit\" name=\"Add/Edit\" value=\"Add/Edit\">

    Thank you,

    David
     
    Pengiun3, Oct 12, 2003
    #1
    1. Advertising

  2. Pengiun3

    brucie Guest

    In post <>
    Pengiun3 said...

    > The following buttons have various widths. I'd like them to all have
    > the width of the column. How should I change these?


    input{width:100%;} will make the buttons the width of their container.
    (if the browser supports it)




    --
    brucie.
    12/October/2003 08:02:59 pm
     
    brucie, Oct 12, 2003
    #2
    1. Advertising

  3. Pengiun3

    Pengiun3 Guest

    Brucie,

    That doesn't work for me. I'm viewing with Netscape on linux RH8 at
    the moment. I don't have a WinMachine with IE to check it right now.
    I'd like to find something that would work on most browsers.

    David

    brucie wrote:
    > In post <>
    > Pengiun3 said...
    >
    >
    >> The following buttons have various widths. I'd like them to all have
    >>the width of the column. How should I change these?

    >
    >
    > input{width:100%;} will make the buttons the width of their container.
    > (if the browser supports it)
     
    Pengiun3, Oct 12, 2003
    #3
  4. Pengiun3

    brucie Guest

    In post <>
    Pengiun3 said...

    >>> The following buttons have various widths. I'd like them to all have
    >>>the width of the column. How should I change these?


    >> input{width:100%;} will make the buttons the width of their container.
    >> (if the browser supports it)


    > That doesn't work for me. I'm viewing with Netscape on linux RH8 at
    > the moment. I don't have a WinMachine with IE to check it right now.
    > I'd like to find something that would work on most browsers.


    it should be fine. NS version? URL?

    please don't toppost
    How am I supposed to post my replies in a newsgroup?:
    http://allmyfaqs.com/faq.pl?How_to_post

    --
    brucie.
    12/October/2003 09:39:13 pm
     
    brucie, Oct 12, 2003
    #4
  5. Pengiun3

    Pengiun3 Guest

    brucie wrote:
    > In post <>
    > Pengiun3 said...
    >
    >
    >>>> The following buttons have various widths. I'd like them to all have
    >>>>the width of the column. How should I change these?
    >>>

    >
    >>>input{width:100%;} will make the buttons the width of their container.
    >>>(if the browser supports it)

    >>

    >
    >> That doesn't work for me. I'm viewing with Netscape on linux RH8 at
    >>the moment. I don't have a WinMachine with IE to check it right now.
    >>I'd like to find something that would work on most browsers.

    >
    >
    > it should be fine. NS version? URL?


    Hmm, Mozilla 1.0.1 on linux RH8. Netscape 4.61 on OS/2. IE6 on Windows.

    I've posted the mock up on http://4.7.104.9/Index.html

    Thank you,

    David
     
    Pengiun3, Oct 14, 2003
    #5
  6. Pengiun3 wrote:

    > I've posted the mock up on http://4.7.104.9/Index.html


    which contains:

    <td><input{width:100%;} type="submit" name="UID2 Change"
    value="Change"></td>

    Ah I think you mean:

    <td><input style="width:100%;" type="submit" name="UID2 Change"
    value="Change"></td>

    or better still, between <head> and </head>:

    <style type="text/css" media="screen,projection">
    input.wide { width:100%; }
    </style>

    and then for your input element:

    <td><input class="wide" type="submit" name="UID2 Change"
    value="Change"></td>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
     
    Toby A Inkster, Oct 14, 2003
    #6
  7. Pengiun3

    Mark Parnell Guest

    Sometime around Tue, 14 Oct 2003 07:57:52 +0100, Toby A Inkster is reported
    to have stated:

    > or better still, between <head> and </head>:
    >
    > <style type="text/css" media="screen,projection">
    > input.wide { width:100%; }
    > </style>


    Or better again,

    <link rel="stylesheet" href="foo.css" media="screen,projection">

    And in foo.css:

    input.wide { width:100%; }


    :)

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Oct 14, 2003
    #7
  8. Pengiun3

    Pengiun3 Guest

    Toby A Inkster wrote:
    > Pengiun3 wrote:
    >
    >
    >>I've posted the mock up on http://4.7.104.9/Index.html

    >
    >
    > which contains:
    >
    > <td><input{width:100%;} type="submit" name="UID2 Change"
    > value="Change"></td>
    >
    > Ah I think you mean:
    >
    > <td><input style="width:100%;" type="submit" name="UID2 Change"
    > value="Change"></td>
    >
    > or better still, between <head> and </head>:
    >
    > <style type="text/css" media="screen,projection">
    > input.wide { width:100%; }
    > </style>
    >
    > and then for your input element:
    >
    > <td><input class="wide" type="submit" name="UID2 Change"
    > value="Change"></td>


    Thanks Toby. That worked for me. I'm still rather new to HTML 4 and
    below. I hadn't read much about CSS so it hadn't occured to me to look
    there for an answer. I was hoping there was a variant of the size
    parameter.

    David
     
    Pengiun3, Oct 15, 2003
    #8
  9. Pengiun3

    Pengiun3 Guest

    Mark Parnell wrote:
    > Sometime around Tue, 14 Oct 2003 07:57:52 +0100, Toby A Inkster is reported
    > to have stated:
    >
    >
    >>or better still, between <head> and </head>:
    >>
    >><style type="text/css" media="screen,projection">
    >>input.wide { width:100%; }
    >></style>

    >
    >
    > Or better again,
    >
    > <link rel="stylesheet" href="foo.css" media="screen,projection">
    >
    > And in foo.css:
    >
    > input.wide { width:100%; }
    >
    >
    > :)



    Thanks Mark.

    I'll read up on CSS. I was hoping not to rely on too many new
    technologies. I'd like to support even old browsers. But all this
    seems to be compatible so its well worth including.

    David
     
    Pengiun3, Oct 15, 2003
    #9
  10. Pengiun3

    Mark Parnell Guest

    Sometime around Wed, 15 Oct 2003 00:58:31 GMT, Pengiun3 is reported to have
    stated:

    > Thanks Mark.
    >


    You're welcome.

    > I'll read up on CSS.


    Well worth the effort. Ask brucie for some links. :)

    > I was hoping not to rely on too many new
    > technologies.


    CSS is hardly new - the CSS1 specs were published in 1996, and CSS2 (the
    current version) in 1998.

    > I'd like to support even old browsers. But all this
    > seems to be compatible so its well worth including.


    CSS is ideal because browsers that don't understand it still get full
    access to the content. Except browsers like NS4, which pretend to
    understand it, and screw it up completely. But it is easy enough to hide
    the CSS from non-conforming browsers - see
    http://w3development.de/css/hide_css_from_browsers/

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Oct 15, 2003
    #10
  11. Pengiun3

    jadecloward

    Joined:
    Apr 5, 2012
    Messages:
    1
    Style or Set a Width to Text Buttons in HTML

    <input style="width:200px;" type="submit" name="Change"
    value="Change">...
    *Include here inline style.
    This works.
     
    jadecloward, Apr 5, 2012
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    783
    Bruce Barker
    Oct 10, 2005
  2. Coder
    Replies:
    1
    Views:
    702
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,924
    Steve Richter
    Jun 15, 2007
  4. Robert Cramer
    Replies:
    1
    Views:
    556
    bruce barker
    Mar 11, 2008
  5. FishGills

    Retrieving width with only min-width set?

    FishGills, Oct 18, 2006, in forum: Javascript
    Replies:
    0
    Views:
    94
    FishGills
    Oct 18, 2006
Loading...

Share This Page