Textarea (asp: TextBox TextMode = "multiligne") boutons qui se chevauchent

Question

Je vais avoir ce problème avec des boutons de formulaire qui se chevauchent un aspic: Texbox avec TextMode réglé sur plusieurs lignes: alt text http://www.nango.co.uk/forums/uploads/1251792203/gallery_2_3_18518.jpg

Voici le 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"> 
        <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> 

Voici le CSS:

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

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

Toute idée comment je peux arrêter cela?

Merci.

Answer 1

Il est disposé exactement comme vous le lui avez demandé. La classe que vous affectez .row a une propriété height de 40px. Puisque vous avez spécifié la hauteur, le div du conteneur n'a que 40 px de haut, c'est pourquoi vos boutons apparaissent au-dessus. Si vous avez ajouté un style="overflow: hidden" à la div contenant la zone de texte, vous remarquerez que la plus grande partie de cette zone de texte a disparu. Vous devrez soit ajouter un nouveau style qui remplace la propriété height, soit supprimer la classe de ce div. Lorsque vous travaillez avec ces types de problèmes de mise en page, il peut être utile d'ajouter une propriété border ou background-color aux classes que vous soupçonnez pour vous aider à visualiser ce qui se passe. Dans ce cas, votre zone de texte multiligne déborde en dehors de la div 40px.