Textarea (asp: Textbox TextMode = "Multiline") перекрывающиеся кнопки

Question

У меня проблема с кнопками формы, перекрывающими asp: Texbox с TextMode, установленным в несколько строк: альтернативный текст 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, имеет свойство высоты 40 пикселей. Так как вы указали высоту, контейнер div имеет высоту всего 40 пикселей, поэтому ваши кнопки появляются поверх него. Если вы добавите style="overflow: hidden" к элементу div, содержащему текстовую область, вы заметите, что большая часть этой текстовой области исчезла. Вам нужно будет либо добавить новый стиль, который переопределяет свойство высоты, либо удалить весь класс из этого div.

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