CODEWITHSUNDEEP
html
Retrocoder
Retrocoder

Reputation: 4713

getting html buttons to appear in the correct place with IE

I have some HTML which renders correctly under firefox but not in IE7. In firefox the buttons (btnSave & btnCancel) appear under the ajaxHTMLEditor control. With IE the buttons appear above the ajaxHTMLEditor control, slightly overlapping the top and also centred. I’ve pasted the HTML below to ask if anyone can tell me what I need to do to make the buttons appear below the ajax control.

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

Upvotes: 1

Views: 381

Answers (1)

Gregg B
Gregg B

Reputation: 13727

Just need to clear the floats. see below: 

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

Upvotes: 1

Related Questions