I'm having this problem with form buttons overlapping an asp:Texbox with TextMode set to multi-line: alt text http://www.nango.co.uk/forums/uploads/1251792203/gallery_2_3_18518.jpg
Here is the code:
<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">
开发者_C百科 <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>
Here is the CSS:
.row
{
float:left;
height:40px;
}
.button-row
{
float:left;
width:323px;
text-align:right;
}
Any ideas how I can stop this?
Thanks.
It's laying out exactly as you told it to. The class you assign .row
has a height property of 40px. Since you specified the height the container div is only 40 px high which is why your buttons appear on top of it. If you added a style="overflow: hidden"
to the div holding the textarea you'd notice that most of that textarea disappeared. You'll either need to add a new style that overrides the height property or remove the class all together from that div.
When working with these kinds of layout issues it can be helpful to add a border
or background-color
property to the classes you're suspecting to help you visualize what's going on. In this case your multiline textbox is overflowing outside of the 40px div.
精彩评论