Results 1 to 1 of 1
  1. #1
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Silicon Valley, USA
    Thanked 94 Times in 90 Posts

    Making a FieldSet Shrink to Fit

    Most elements in HTML seem to expand to fill the entire width of the page, tables being a major exception. I recently discovered the FIELDSET tag, which creates a "frame-like" box around form elements (and using CSS, you can style the legend with a semi-3D look). So far so good. However, the FieldSet extends across the entire page by default, as there is nothing to "contain" it except the FORM element. Hmmm... I could embed the form in a single-cell TABLE, but I was hoping to find another way. On an Italian discussion board, I found a tip that seems to work well in Firefox. The tip is to add a style setting of display: table to the FORM element, which causes the form to change its behavior from an implicit width=100% to shrink-to-fit, thus shrinking the FieldSet along with it.
    <pre><form METHOD="POST" ACTION="action.asp" id="frmCliSrch">
    <legend>Search by Client</legend>
    <td CLASS="bld" valign="top">Query: </td>
    <td valign="top">
    <input TYPE="Text" NAME="Field1" ID="frmDefaultField" size="30">
    <input TYPE="Submit" NAME="Field2" value="Search!">
    <input type="radio" name="Field3" value="Value3A" checked>Beginning
    of client name (prefix)
    <input type="radio" name="Field3" value="Value3B">Anywhere in client
    name (letter string)
    <input type="radio" name="Field3" value="Value3C">Exact client code (e.g.,

    The corresponding CSS is:
    <pre>#frmCliSrch {padding: 5px 0px; display: table }
    fieldset {border: 1px solid #566370}
    legend {font-weight: bold; font-size: 90%;
    background: #D2D8DD; padding: 2px 8px;
    border: 1px solid #ccc;
    border-bottom-color: #566370;
    border-right-color: #566370}
    #frmCliSrch table {margin: 8px}

    But not in IE. The translation site seemed to show that the people in that thread also could not make this work correctly, so I am not alone.

    Does anyone have any other ideas for a magic "shrink-to-fit" solution for IE? I guess it's okay if my site looks better in Firefox than in IE, but it's always nice to make more people happy. <img src=/S/smile.gif border=0 alt=smile width=15 height=15>
    Attached Images Attached Images

Posting Permissions

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