2011-08-11 8 views
2

필드 세트의 레이블과 요소 사이의 공간을 재생하려고하는데 비참하게 실패합니다. 필자가 첨부 한 글에서, 새로운 요소와 필드 세트 사이의 간격을 되찾고 싶습니다. 내 인생을 위해서 나는 그것을 할 방법을 찾을 수없는 것 같습니다. FF8 비트 un 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; 
     } 

Reduce space between elements

답변

4

요소는 브라우저 기본 스타일로 인해 다른 브라우저에서 다르게 렌더링되지만 요소가 브라우저 간 호환성의 관점에서 가장 일치하지 않습니다. 양식 요소 및 기타 관련 요소의 기본 브라우저 스타일을 먼저 재설정해야합니다. 주로 여백과 패딩을 0으로 만듭니다. 예 :

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

그런 다음 각 요소를 개별적으로 다시 스타일을 지정하십시오.

또한 dl 및 dd의 개요 및 여백 및 패딩을 재설정해야합니다. 시도해보십시오.

1

그것은 간격을 가지고있는 DTDD 태그 수 있습니다. 주변에 outline을 설정하고 margin 및/또는 padding0px으로 설정하십시오.

관련 문제