Advanced Search

Results 1 to 4 of 4

Thread: Boundaries of a fieldset

  1. #1
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Boundaries of a fieldset

    Dear dynamics,

    I have a small login form in which I have used a field set and legend. We wanted to "colour in" the frame, however the extent of the fieldset seems to include the height of the legend, which is, I suppose, logical.

    So the question is this: is there a way to force the backgound colour to start within the boundary of the fieldset's surrounding box?

    thank you................... lizat

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    Hi there lizat,

    your problem only occurs with IE.

    Like most things with IE, there is a work around for this oddity.

    Here is an example for you to play with...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    body {
        margin:10px;
        background-color:#336;
     }
    #myform  {
        width:224px;
        padding:20px;
        border:1px solid #000;
        margin:auto;
        background-color:#999;
     }
    
    #myform fieldset {
        padding:10px;
        border:1px solid #000;
        background-color:#ccc;
        color:#000;
     }
    #myform legend {
        border:1px solid #000;
        padding:5px;
        margin-left:20px;
        background-color:#ffc;
        font-size:0.8em;
        color:#300;
     }
    #myform input {
        display:block;
        width:200px;
        margin:0 auto 10px;
     }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #myform  {
        padding-top:35px;      /* this value may need fine tuning !!! */
     }
    #myform fieldset {
        position:relative;
        padding-top:20px;      /* this value may need fine tuning !!! */
        background-color:#ccc; /* same background-color as body or container background-color*/
     }
    #myform legend {
        position:absolute;
        margin-top:-36px;      /* this value may need fine tuning !!! */
        margin-left:10px;      /* this value may need fine tuning !!! */
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <form id="myform" action="#">
    <fieldset>
    <legend>this is a legend</legend>
    <input type="text">
    <input type="text">
    <input type="text">
    </fieldset>
    </form>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Oh that's good, thank you!

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    No problem, you're very welcome.

Bookmarks

Posting Permissions

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