Как я могу уменьшить пространство между элементами в наборе полей

Question

Я пытаюсь уменьшить расстояние между меткой и элементами в наборе полей и терпит неудачу. В предоставленном мною приложении я хотел бы изменить расстояние между каждым новым элементом и вокруг набора полей. По жизни я не могу найти способ сделать это. Он отображается нормально с нормальным интервалом в бите FF и IE8, кажется, что интервал удваивается. Я был бы благодарен, если бы кто-то мог показать мне способ достигнуть этого. Спасибо

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;
        }

Answer 1

Элементы отображаются в разных браузерах по-разному из-за их стилей по умолчанию для браузера, но элементы формы являются наиболее несовместимыми с точки зрения кросс-браузерной совместимости. Сначала вы должны сбросить стиль браузера по умолчанию для элементов формы и других связанных элементов. В основном поля и отступы элементов к нулю. например,

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

Затем измените стиль каждого элемента по-своему.

Вам также необходимо сбросить контур, поля и отступы для ваших dl и dd. Попробуйте это ..

Answer 2

Это могут быть теги DT и DD с пробелами. Попробуйте установить вокруг них outline, а затем установите margin и / или padding на 0px.