Having CSS issues with <fieldset> and <legend>

Posted on 2007-10-07
Last Modified: 2008-01-09
Would someone be kind enough to help me sort out my form here? I have legends bleeding into other legends, etc. Source is easily viewable as always. I *think* I have a mis-alignment of <div> tags, eg one missing or one too many. Can't seem to catch it.


Question by:stevefNYC
    LVL 28

    Accepted Solution


    Hi, the fieldset bleeding background is a known IE bug - one of the few workarounds involves positioning the fieldset realtively, positioning the legend absolutely and giving it a negative top value. Margins and padding have to be re-adjusted...
    with a link to  (image workaround)

    You can try adding this at the end of your head section (you will have to adjust margins and paddings!):

    <!--[if IE]>

    fieldset{ position: relative; }
    legend{ position:absolute; top: -10px;  }      /*or top:-5em; left 0.5em; as in one of the examples linked to above */

    LVL 4

    Expert Comment

    The label widths are sfixed causing the text to wrap when wider than 100px, you can simply make them wider (200px worked ok for me), of course - this will change the appearance slightly.

    The width for the label is set in on line 130

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now