2011-10-17 15 views
0

私の問題は、整列する必要がある2つのドロップダウンボックスがあることです。 Firefoxでは、うまく動作します。基本的に、国のための1つのフォームボックス、そしてその下には、州のための別のフォームボックス。 IEでは、これらのボックスは互いに隣り合っています。私は最初のフォームの下に2番目のフォームボックスが現れるようにスタイルを設定しようとしています。IE CSSアラインメントの問題

私のHTMLコード(読みやすくなるだろうので、私はいくつかの州を切り落とし):

<div class="label">*Country:</div> 
<div class="field"> 
    <asp:DropDownList ID="country" CssClass="country2" runat="server"></asp:DropDownList>  
</div> 
<div class="label"></div> 
<div class="field"> 
    <asp:DropDownList ID="us_states" runat="server" CssClass="us_state_dropdown2"> 
    <asp:ListItem>-Select State-</asp:ListItem> 
    <asp:ListItem>Alabama</asp:ListItem> 
    <asp:ListItem>Alaska</asp:ListItem> 
    <asp:ListItem>Arizona</asp:ListItem> 
    </asp:DropDownList> 
</div> 

私のCSSクラスのコード「ラベル」、「フィールド」、「COUNTRY2」、および「us_state_dropdown2 ":

.label {width: 195px !important; height: 28px; } 
.field {width: auto !important;} 
.country2 { width:212px !important;} 
.us_state_dropdown2 { width:212px !important;} 

+0

'float'のようなコンテキストで' div'sに適用されるルールはありますか? – jball

+0

完全なCSS(私は関連性がないと思われるものを省きました): #contact_form .label {width:195px!important;高さ:28px; } #contact_form .field {width:auto!important;} .question {float:left; width:100%;} .question .label {height:auto!important;} .question .field {margin-top:0px!important; } .country2 {幅:!212px重要;} .us_state_dropdown2 {幅:!212px重要;} – ndisdabest

答えて

1

clearを使用すると、選択した面に要素が配置されないようにすることができます。 clearの使用方法については、CSSリファレンスを参照してください。 MDN Reference

+0

私が入れた場合でも "クリア:!両方が重要。"これについては、私はまだ同じ振る舞いを見ています。私が最初に試したことの一つでした。 – ndisdabest

+0

@ndisdabest、あなたはページの関連するソースを提供できますか? ASPサーバーのない人が答えをテストする方が簡単になります。 http://www.jsfiddle.netに貼り付けることができます。 –

+0

心配しないで、私はそれを理解することができました。ちょうど別のDIVでそれを包んで、それは正常に動作するようだ。 – ndisdabest