How can I reduce space between elements in a fieldset

I am trying to recude the space between the label and elements in a fieldset and failing miserably. In the attached grab I have provided, I would like to recude the spacing between each new element and around the fieldset. For the life of me I cannot seem to find a way to do it. It displays fine with normal spacing in FF bit un IE8, it seems to be doubling the spacing. I would be gratful if someone could show me a way to achieve this. Thanks

HTML

         <fieldset>
            <legend class="fld_company icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Select Company</legend>
                <div class="formMessage">Click again to open</div>
                    <div class="fld_fld">
                     <dl>
                      <dt>
                         <label for="BA_customer">Select a Company:</label>
                      </dt>
                      <dd>
                         <select name="BA_customer" id="BA_customer">
                           <option SELECTED VALUE="">Select a Company</option>
                            <?php
                                do {  
                                ?>
                           <option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option>
                            <?php
                                   } 
                                   while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust));
                                   $rows = mysql_num_rows($Recordsetcust);
                                   if($rows > 0)
                                   {
                                   mysql_data_seek($Recordsetcust, 0);
             开发者_开发问答                      $row_Recordsetcust = mysql_fetch_assoc($Recordsetcust);
                                   }
                             ?>
                         </select>
                     </dd>
                    </dl>

            <!--- displays the address and dept from the change function -->

                <div id="BA_dept"></div>
                <div id="BA_address"></div>
          </fieldset>

CSS

legend
        {


        background:#00C621;
        color:#fff;
        font:17px/21px Calibri, Arial, Helvetica, sans-serif;
        padding:0 10px;
        margin:-26px 0 -2px -8px;
        font-weight:bold;
        border:1px solid #f2f2e6;
        border-color:#e5e5c3 #e5e5c3 #666661 #e5e5c3;
        cursor: pointer;

        }



legend.fld_company
        {

        width: 140px;

        }

fieldset.action
        {

        background:#9da2a6;
        border-color:#e5e5e5 #797c80 #797c80 #e5e5e5;
        margin-top:40px;

        }

fieldset
        {

        background:#f2f2e6;
        border:1px solid #e5e5e5;
        border-color:#e5e5e5 #e5e5e5 #666661 #e5e5e5;
        margin:10px 0 36px 0;
        width:490px;
        display:block;
        text-height:10px;
        }

---

Elements are rendered differently in different browsers due to their browser default styles, but the form elements are the most inconsistent from the point of view of cross-browser compatibility. You should first reset the default browser style of your form elements and other related elements. Mostly margins and paddings of the elements to zero. e.g.

form, fieldset, legend, label, input{ margin: 0; padding: 0;}

Then re-style each elements individually in your way.

You also need to reset the outline and margin and padding of your dl and dd. Try this..

---

It might be the DT and DD tags that have spacing. Try setting an outline around them to see, and then set the margin and/or padding to 0px.