2009-09-21 2 views
0

以下は、私が取り組んでいるテストページ全体です(私はまだそれが醜いと混乱していることを認識しています)。私の問題はul class = "dropdown"です。私はSELECTの代わりにそれを意図しているので、私はそれをスタイルすることができます(まだ、まだ行われていません)。しかし、私はそれを私が望むところに置くことはできません。 FF3.5でこのページを見ると、それをどのように配置したいのですか?しかし、IE7では、ラベルに突き当たる代わりにULを次の行に押し込んでいます。私はオンラインで見つけた数多くのハッキングを試しましたが、誰も助けてくれないようです。私はここで何が欠けていますか?インラインUL要素がIE7で動作しない

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
     <title>Radix Test Page</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style type="text/css"> 
      body{ 
       margin:0; 
       padding:1em;  
       font-family:arial,sans-serif; 
      } 

      .user-form li 
      { 
       background: #fff none no-repeat bottom right; 
       border: 1px solid #000; 
       margin: 0; 
       padding-right: 35px; 
       text-align: right; 
      } 

      .user-form li label 
      { 
       background: #fff; 
       border: 1px solid #333; 
       display: -moz-inline-stack; /* Support below FF3 */ 
       display: inline-block;  /* Used only to set width */ 
       padding: 1px 0; 
       width: 10em; 
      } 

      .dropdown 
      { 
       border: 1px solid #f00; 
       width: 20em; 
       padding: 0; 
       margin: 0; 
       display:inline-block; 
      } 

      .dropdown , 
      .dropdown ul 
      { 
       list-style-type:none; 
      } 

      .dropdown li 
      { 
       text-align: left; 
      } 
     </style> 
    </head> 
    <body> 
     <form id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" class="edit-on" action="/service/testclass.php"> 
      <fieldset> 
       <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:id" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" type="hidden"/> 
       <ul class="user-form"> 
        <li class="valid"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">Prefix:</label> 
         <input value="Ms." id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix" name="name_prefix" type="hidden"/> 
         <ul class="dropdown"> 
          <li> 
           <a href="#" class="trigger">Miss</a> 
          </li> 
          <li class="dropcontainer"> 
           <ul class="dropdownhidden"> 
            <li> 
             <a href="#">&nbsp;</a> 
            </li> 
            <li> 
             <a href="#">Mister</a> 
            </li> 
            <li> 
             <a href="#">Misses</a> 
            </li> 
            <li> 
             <a href="#">Miss</a> 
            </li> 
            <li> 
             <a href="#">Doctor</a> 
            </li> 
            <li> 
             <a href="#">This is just a little test to see exactly how long this silly thing will make my option</a> 
            </li> 
           </ul> 
          </li> 
         </ul> 
         <input name="name_prefix_value" value="Mr." type="hidden"/> 
        </li> 
        <li class="valid"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name">Customer Last Name:</label> 
         <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name" name="last_name" value="Jones" type="text"/> 
        </li> 
        <li class="valid"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name">My First Name:</label> 
         <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name" name="first_name" value="George" type="text"/> 
        </li> 
        <li class="valid"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name">Middle Name:</label> 
         <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name" name="middle_name" type="text"/> 
        </li> 
        <li class="valid"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix">Suffix:</label> 
         <select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix" name="name_suffix"> 
          <option value="0"/> 
          <option value="Jr.">Junior</option> 
          <option value="Sr.">Senior</option> 
         </select> 
         <input name="name_suffix_value" type="hidden"/> 
        </li> 
        <li class="invalid"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date">Date of Birth:</label> 
         <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date" name="birth_date" type="text"/> 
        </li> 
        <li class="warning"> 
         <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender">Gender:</label> 
         <select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender" name="gender"> 
          <option value="0"/> 
          <option value="U">Unknown</option> 
          <option value="M">Male</option> 
          <option value="F">Female</option> 
         </select> 
         <input name="gender_value" type="hidden"/> 
        </li> 
       </ul> 
       <div class="form-actionbar"> 
        <input name="form-edit" value="Edit" class="button-view" type="submit" disabled="disabled"/> 
        <input name="form-draft" value="Draft" class="button-edit" type="submit"/> 
        <input name="form-submit" value="Submit" class="button-edit" type="submit"/> 
        <input name="form-cancel" value="CancelMe" class="button-edit" type="submit"/> 
        <input name="form-suspend" value="Suspend" class="button" type="submit"/> 
       </div> 
      </fieldset> 
     </form> 
    </body> 
</html> 

答えて

0

ULの後に隠れた入力フィールドを移動しようとしましたか?

+0

はい、私は移動して隠れた入力を削除しましたが、何も変更されていないようです。 – heath

0

<label> and さんのテーブルに入れてみてください。このように:IE7で

............ 
    <fieldset> 
      <input id="Hidden1" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" 
       type="hidden" /> 
      <ul class="user-form"> 
       <li class="valid"> 
        <table cellpadding="0" cellspacing="0" border="0"> 
         <tr> 
          <td style="vertical-align:bottom"> 
           <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix"> 
            Prefix:</label> 
          </td> 
          <td> 
           <ul class="dropdown"> 
            <li><a href="#" class="trigger">Miss</a> </li> 
            <li class="dropcontainer"> 
             <ul class="dropdownhidden"> 
              <li><a href="#"></a></li> 
              <li><a href="#">Mister</a> </li> 
              <li><a href="#">Misses</a> </li> 
              <li><a href="#">Miss</a> </li> 
              <li><a href="#">Doctor</a> </li> 
              <li><a href="#">This is just a little test to see exactly how long this silly thing 
               will make my option</a></li> 
             </ul> 
            </li> 
           </ul> 
          </td> 
         </tr> 
        </table> 
        <input value="Ms." id="Hidden2" name="name_prefix" 
         type="hidden" /> 
        <input name="name_prefix_value" value="Mr." type="hidden" /> 
       </li> 
............ 
+0

これは、私がCSSだけで達成できるはずのもののようです。 – heath

0

、あなたは通常、「つまりLT 7」スタイルシートで見つかった、その後のルールにdisplay: inline;display: inline-block; CSSルールを持つ任意の要素に従わなければなりません。それはおそらくここで何が起こっているのでしょうか?

関連する問題