bekommen HTML-Schaltflächen an der richtigen Stelle mit IE

Question

Ich habe einige HTML, die korrekt unter Firefox, aber nicht in IE7 rendert. In Firefox erscheinen die Buttons (btnSave & btnCancel) unter dem ajaxHTMLEditor-Steuerelement. Bei IE erscheinen die Buttons über dem ajaxHTMLEditor-Steuerelement und überlappen den oberen und den mittleren Teil leicht. Ich habe den folgenden HTML-Code eingefügt, um zu fragen, ob mir jemand sagen kann, was ich tun muss, damit die Schaltflächen unter dem Ajax-Steuerelement erscheinen.

<ContentTemplate> 
<div style="float: left"> 
    <div style="float: left; width: 100%; border: solid 0px red;"> 
    <div style="float:left; width: 200px;">Message type: </div> 
    <div style="float: left; width: 1000px;"> 
     <asp:TextBox ID="txtMessageType" runat="server"></asp:TextBox>   
    </div> 
    </div> 

    <div style="float: left; margin-top: 20px; border: solid 0px purple; width: 100%"> 
    <div style="float:left; width: 200px;">Message body: <br /><br /> 
     <ajaxHTMLEditor:Editor ID="Editor1" runat="server" Width="800px" Height="400px" />    
    </div> 
    </div> 

    <div style="float: left; border: solid 0px green; width: 100%; margin-top: 20px; padding-left: 10px;"> 
    <div style="float: left"> 
     <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /> 
    </div> 

    <div style="float: left; width: 20px;"></div>  

    <div style="float: left"> 
     <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="false" /> 
    </div>   
    </div> 
</div> 
</ContentTemplate> 

Answer 1

Nur müssen die Schwimmer zu löschen. siehe unten:

<div style="float: left"> 
     <div style="float: left; width: 100%; border: solid 0px red;"> 
     <div style="float:left; width: 200px;">Message type: </div> 
     <div style="float: left; width: 1000px;"> 
      <input type="TextBox" ID="txtMessageType" runat="server" />   
     </div> 
     </div> 

     <div style="float: left; margin-top: 20px; border: solid 0px purple; width: 100%"> 
     <div style="float:left; width: 200px;">Message body: <br /><br /> 
      <input type="TextBox" ID="txtMessageType" runat="server" />    
     </div> 

     </div> 
<!--********** Clear your floats here *********--> 

    <br clear="all"> 

     <div style="float: left; border: solid 0px green; width: 100%; margin-top: 20px; padding-left: 10px;"> 
     <div style="float: left"> 
      <input type="Button" ID="btnSave" runat="server" value="save" Text="Save" OnClick="btnSave_Click" /> 
     </div> 

     <div style="float: left; width: 20px;"></div>  

     <div style="float: left"> 
      <input type="Button" ID="btnCancel" runat="server" value="cancel" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="false" /> 
     </div>   
     </div> 
    </div>