CSS and form width problems

Discussion in 'HTML' started by William Krick, Apr 5, 2006.

  1. When I use the <form> tag and give it a background color, by default,
    the form's width is 100%.

    I would like it to behave like a table and have it constrict to fit the
    content inside of it.

    Is this possible with CSS?

    Or do I have to resort to something ugly like putting a table around
    the form?
     
    William Krick, Apr 5, 2006
    #1
    1. Advertising

  2. William  Krick

    Jim Moe Guest

    William Krick wrote:
    > When I use the <form> tag and give it a background color, by default,
    > the form's width is 100%.
    >
    > I would like it to behave like a table and have it constrict to fit the
    > content inside of it.
    >

    form { display: table; }
    But that is not supported by IE.
    Another way is to float the element: form { float: left; }. In the
    absence of an explicit width rule, it shrinks to fit its contents. But
    then you have to deal with a floating element.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Apr 6, 2006
    #2
    1. Advertising

  3. William  Krick

    BootNic Guest

    > "William Krick" <> wrote:
    > news:....
    >
    > When I use the <form> tag and give it a background color, by
    > default, the form's width is 100%.
    >
    > I would like it to behave like a table and have it constrict to fit
    > the content inside of it.
    >
    > Is this possible with CSS?
    >
    > Or do I have to resort to something ugly like putting a table around
    > the form?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252">
    <style type="text/css">
    form{
    display:table;
    color:#0000FF;
    background-color:#E6E6FA;
    border:#800080 0.1em solid;
    }
    input{
    display:block;
    margin:0.3em;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    form{
    width:1px;
    overflow:visible;
    }
    </style>
    <![endif]-->
    <title></title>
    </head>
    <body>
    <form action="#">
    <div>
    <input><input type="submit">
    </div>
    </form>
    </body>
    </html>

    --
    BootNic Wednesday, April 05, 2006 9:32 PM

    Genius is eternal patience.
    *Michelangelo*
     
    BootNic, Apr 6, 2006
    #3
    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:
    842
    Bruce Barker
    Oct 10, 2005
  2. kris
    Replies:
    11
    Views:
    900
  3. Lois
    Replies:
    1
    Views:
    3,409
    Ryan Stewart
    Dec 27, 2004
  4. ppcguy
    Replies:
    3
    Views:
    1,329
    Toby Inkster
    Aug 26, 2005
  5. cera
    Replies:
    1
    Views:
    1,345
    Neredbojias
    Aug 18, 2007
Loading...

Share This Page