2011-08-11 19 views
2

フィールドセット内のラベルと要素の間のスペースをリクルートしようとしていて、悲惨に失敗しています。添付されたグラブでは、新しい要素とフィールドセットの周りの間隔を再現したいと思います。私の人生のために、私はそれを行う方法を見つけることができないようです。 IE8のFFビットで通常のスペーシングで問題なく表示されますが、スペーシングが倍になっているようです。誰かが私にこれを達成する方法を示すことができたら、私は喜んでいます。おかげでそれは間隔を有しDTDDタグであるかもしれないフィールドセット内の要素間のスペースを減らすには

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

Reduce space between elements

答えて

4

エレメントは、ブラウザのデフォルトスタイルのために異なるブラウザで異なるレンダリングされますが、フォームの要素はブラウザ間の互換性の観点から最も不一致です。最初に、フォーム要素やその他の関連要素のデフォルトのブラウザスタイルをリセットする必要があります。ほとんどのマージンと要素のパディングは0になります。例えば

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

次に、各要素を独自の方法で再スタイルします。

また、dlとddのアウトラインとマージンとパディングをリセットする必要があります。試してみてください。

1

。周囲にoutlineを設定してから、marginおよび/またはpadding0pxに設定してください。

関連する問題