IE displaying fieldset legend incorrectly

peter_coop
peter_coop used Ask the Experts™
on
The code I am using is appearing fine in FF but in IE, it resorts to the legend appearing almost in the fieldset with no space for the legend after the fieldset. I have included pic so you can see exact problem. I would be grateful if someone could show me where I am going wrong? I have placed complete code @ http://jsfiddle.net/XLPxx/ 

I find the layout here when you enter code, too restrictive. seems to throw it all out and you spend more time correcting it.  Thanks
legend {
          background:#00C621; color:#fff; 
          font:17px/21px Calibri, Arial, Helvetica, sans-serif; 
          padding:0 10px; margin:-26px 0 -5px -11px; 
          font-weight:bold; border:1px solid #fff; 
          border-color:#e5e5c3 #505014 #666661 #e5e5c3; cursor: pointer;
       }

fieldset.action {
          background:#9da2a6; 
          border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; 
          margin-top:-20px;
       }

fieldset {
          background:#f2f2e6; 
          padding: 0 10px 10px 10px; 
          border:1px solid #fff; 
          border-color:#666661 #fff #666661 #fff; 
          margin-bottom:20px; width:450px;
        }

Open in new window

ie-fieldsetgrab.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
What Doctype are you using? Are you using a CSS reset at all?

Author

Commented:
@LZ1
I am using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> and I am not using css reset. Thanks
LZ1
Top Expert 2011

Commented:
On your page, you may want to include a CSS reset first and let us know where that puts you.
Remember, this will go before any other CSS on your page. http://meyerweb.com/eric/tools/css/reset/ 


Also, do you have a live example as opposed to the JSfiddle?

Author

Commented:
No, I am working localhost. But what I did notice when i put the html in fiddle, was that the end fieldset and form tags had turned red. I assume that means theres an error? When I use this reset, do I leave my original css loaded with it? Thanks
Top Expert 2011
Commented:
I went through the HTML and the validator. There were about 15 errors total. The good news is now it validates on 1.0 Strict Doctype

Try this for the HTML
<body class="contact">
     <div id="adduserform">
          <div id="AUSR_padd"></div>

          <form id="AUSR_adduser" name="AUSR_adduser" action="" method="post" class=
          "adduserform">
               <fieldset>
                    <legend id="fld_company">Select Company</legend>

                    <div id="formMessage">
                         Click again to open
                    </div>

                    <div id="fld_fld">
                         <dl>
                              <dt><label for="AUSR_company" class=
                              "opt">Company</label></dt>

                              <dd><select id="AUSR_company" name="AUSR_company">
                                   <option>
                                        Select a code
                                   </option>

                                   <option value="1">
                                        DEMO1
                                   </option>

                                   <option value="2">
                                        DEMO2
                                   </option>

                                   <option value="3">
                                        DEMO3
                                   </option>

                                   <option value="new">
                                        NEW
                                   </option>
                              </select></dd>
                         </dl><br />
                    </div>

                    <div id="data">
                         <dl>
                              <dt><label for="AUSR_companyname" class="opt">Company
                              Name:</label></dt>

                              <dd><input id="AUSR_companyname" name="AUSR_companyname"
                              type="text" size="32" maxlength="128" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_name" class="opt">Full
                              Name:</label></dt>

                              <dd><input id="AUSR_name" name="AUSR_name" type="text"
                              size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_phone">Phone:</label></dt>

                              <dd><input id="AUSR_phone" name="AUSR_phone" type="text"
                              size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_fax" class="opt">Fax:</label></dt>

                              <dd><input id="AUSR_fax" name="AUSR_fax" type="text" size=
                              "32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_mobile" class=
                              "opt">Mobile:</label></dt>

                              <dd><input id="AUSR_mobile" name="AUSR_mobile" type="text"
                              size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_email" class="opt">Email
                              address:</label></dt>

                              <dd><input id="AUSR_email" name="AUSR_email" type="text"
                              size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_address1" class="opt">Address
                              1:</label></dt>

                              <dd><input id="AUSR_address1" name="AUSR_address1" type=
                              "text" size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_address2" class="opt">Address
                              2:</label></dt>

                              <dd><input id="AUSR_address2" name="AUSR_address2" type=
                              "text" size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_address3" class="opt">Address
                              3:</label></dt>

                              <dd><input id="Vaddress3" name="AUSR_address3" type="text"
                              size="32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_town" class="opt">Town:</label></dt>

                              <dd><input id="Vtown" name="AUSR_town" type="text" size=
                              "32" maxlength="128" value="" /></dd>
                         </dl>

                         <dl>
                              <dt><label for="AUSR_postcode" class=
                              "opt">Postcode:</label></dt>

                              <dd><input id="AUSR_postcode" name="AUSR_postcode" type=
                              "text" size="32" maxlength="128" value="" /></dd>
                         </dl>
                    </div>
               </fieldset>

               <fieldset>
                    <legend>User Info</legend>

                    <dl>
                         <dt><label for="AUSR_username" class=
                         "opt">Username:</label></dt>

                         <dd><input id="AUSR_username" name="AUSR_username" size="32"
                         maxlength="128" value="" /></dd>
                    </dl>

                    <dl>
                         <dt><label for="AUSR_password" class=
                         "opt">Password:</label></dt>

                         <dd><input id="AUSR_password" name="AUSR_password" type="text"
                         size="32" maxlength="32" value="" /></dd>
                    </dl>
               </fieldset>

               <fieldset>
                    <legend>User Status</legend>

                    <dl>
                         <dt><label for="AUSR_active" class="opt">Active</label></dt>

                         <dd><select id="AUSR_active" name="AUSR_active">
                              <option>
                                   Active Level
                              </option>

                              <option value="1">
                                   YES
                              </option>

                              <option value="0">
                                   NO
                              </option>
                         </select></dd>
                    </dl><br />

                    <dl>
                         <dt><label for="AUSR_level" class="opt">Level</label></dt>

                         <dd><select id="AUSR_level" name="AUSR_level">
                              <option>
                                   Client Level
                              </option>

                              <option value="0">
                                   Admin
                              </option>

                              <option value="1">
                                   Superuser
                              </option>

                              <option value="2">
                                   Limited User
                              </option>
                         </select></dd>
                    </dl>
               </fieldset><button id="AUSR_submit" class="addusersubmit">Add
               User</button>
          </form>
     </div><!-- end of form to add user -->
</body>

Open in new window

Author

Commented:
What is class=contact? I didn't have that in original code? Thanks
LZ1
Top Expert 2011

Commented:
You can just remove the whole class part on the body. Not sure how that got in there.

Author

Commented:
Thank you very much for your help

Author

Commented:
Thank you
LZ1
Top Expert 2011

Commented:
Glad to help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial