Textarea (осина: Textbox TextMode = «Multiline») перекрывают кнопки

Question

Я имею эту проблему с помощью кнопки формы перекрытия в жерех: Texbox с TextMode установлен в многострочно: alt text http://www.nango.co.uk/forums/uploads/1251792203/gallery_2_3_18518.jpg

Вот код:

<asp:Panel ID="pnlGiftStep" Visible="false" runat="server"> 
       <img src="/images/shopping-cart/form-separator.png" alt="separator" /> 
       <div class="form-title">GIFT OPTIONS</div> 
       <div class="row"> 
        <asp:TextBox ID="txtGiftName" Height="31" Width="323" BorderStyle="None" Font-Names="Arial" 
         Font-Size="116.7%" runat="server"></asp:TextBox> 
        <cc1:TextBoxWatermarkExtender ID="wmeGiftName" 
         TargetControlID="txtGiftName" WatermarkText="Gift Name" 
         WatermarkCssClass="watermark" runat="server"></cc1:TextBoxWatermarkExtender> 
       </div> 
       <br class="clear" /> 
       <div class="row"> 
        <asp:TextBox ID="txtGiftMessage" Rows="5" Width="323" BorderStyle="None" 
         Font-Names="Arial" TextMode="MultiLine" 
         Font-Size="116.7%" runat="server"></asp:TextBox> 
        <cc1:TextBoxWatermarkExtender ID="wmeGiftMessage" 
         TargetControlID="txtGiftMessage" WatermarkText="Gift Message" 
         WatermarkCssClass="watermark" runat="server"></cc1:TextBoxWatermarkExtender> 
       </div> 
       <br class="clear" /> 
       <div class="button-row"> 
        <asp:ImageButton ID="imbShippingDetails" 
         ImageUrl="/images/shopping-cart/ship-details-btn.png" 
         OnClick="ReturnToShipping" 
         ValidationGroup="shipping" 
         runat="server" /> 
        <asp:ImageButton ID="imbPayDetails" ImageUrl="/images/shopping-cart/pay-details-btn.png" 
         ValidationGroup="pay" 
         runat="server" /> 
       </div> 
       <br class="clear" /> 
      </asp:Panel> 

Вот CSS:

.row 
{ 
    float:left; 
    height:40px; 
} 

.button-row 
{ 
    float:left; 
    width:323px; 
    text-align:right; 
} 

Любые идеи, как я могу остановить это?

Спасибо.

Answer 1

Это как раз то, что вы сказали. Класс, который вы назначили .row, имеет свойство height 40px. Поскольку вы указали высоту, контейнер div равен только 40 px, поэтому ваши кнопки появляются поверх него. Если вы добавили style="overflow: hidden" в div, где находится текстовое поле, вы заметите, что большая часть этого текстового поля исчезла. Вам нужно будет добавить новый стиль, который переопределяет свойство height или удаляет класс из этого div.

При работе с этими типами макетов может оказаться полезным добавить объекты border или background-color классам, которые вы подозреваете, чтобы помочь вам визуализировать происходящее. В этом случае ваше многострочное текстовое поле переполняется вне div 40px.