asp.net labels and asp.net textboxes are not lining up correctly?

Posted by Xaisoft on Stack Overflow See other posts from Stack Overflow or by Xaisoft
Published on 2010-06-15T19:04:56Z Indexed on 2010/06/15 19:42 UTC
Read the original article Hit count: 302

Filed under:
|
|

My Registration page currently looks like the following: alt text

The current styling I have for the above is image is:

<style type="text/css">
#contactinfo label
{
    float: left;
    width: 10em;
    margin-right: 0.5em;
    text-align: right;
    font-size: 14px;
}

#contactinfo p
{
    padding: 5px;
}
#contactinfo input[type="text"], input[type="password"]
{
    height: 1.5em;
}
#contactinfo select
{
    padding: 0.25em;
}
#contactinfo input[type="text"]:focus, input[type="password"]:focus
{
    background-color: #FFFFE0;
}

#contactinfo .update
{
    margin-left: 12.5em;
}
#contactinfo .error
{
    background-color: transparent;
}
#contactinfo .longtextbox
{
    width: 20em;
}
#contactinfo .shorttextbox
{
    width: 5em;
}
</style>

and the markup is

<div id="contactinfo">
<p>
    <asp:Label runat="server"  
               AssociatedControlID="txtEmail">Email
    </asp:Label>
    <asp:TextBox ID="txtEmail" 
                 runat="server" 
                 CssClass="longtextbox" />
</p>
<p>
    <asp:Label runat="server" 
               AssociatedControlID="txtFirstName">First Name
    </asp:Label>
    <asp:TextBox ID="txtFirstName" 
                 runat="server" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtFirstName" 
                                Text="First Name is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server" 
               AssociatedControlID="txtLastName">Last Name
    </asp:Label>
    <asp:TextBox ID="txtLastName" 
                 runat="server" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtLastName" 
                                Text="Last Name is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server" 
               AssociatedControlID="txtBusinessName">Business Name
    </asp:Label>
    <asp:TextBox ID="txtBusinessName" 
                 runat="server" 
                 CssClass="longtextbox" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtBusinessName" 
                                Text="Business Name is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server"  
               AssociatedControlID="txtPhone">Phone
    </asp:Label>
    <asp:TextBox ID="txtPhone" 
                 runat="server" 
                 ValidationGroup="AccountValidation" />
    </p>
    <p>
    <asp:Label runat="server"  
               AssociatedControlID="txtAddress">Address
    </asp:Label>
    <asp:TextBox ID="txtAddress" 
                 runat="server" 
                 CssClass="longtextbox" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtAddress" 
                                Text="Address is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error"></asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server"  
               AssociatedControlID="txtCity">City
    </asp:Label><asp:TextBox ID="txtCity" 
                             runat="server" 
                             ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4"
            runat="server"
            ControlToValidate="txtCity" 
            Text="City is required."
            ValidationGroup="AccountValidation" 
            CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server" 
               AssociatedControlID="ddlState">State
    </asp:Label>
    <asp:DropDownList ID="ddlState" 
                      runat="server" 
                      DataSourceID="dsStates"  
                      DataTextField="Name"
                      DataValueField="Id">
    </asp:DropDownList>
    </p>
    <p>
    <asp:Label runat="server"                   
               AssociatedControlID="txtZipcode">Zipcode</asp:Label>
               <asp:TextBox ID="txtZipCode" runat="server" CssClass="shorttextbox"  
               ValidationGroup="AccountValidation" />

    </p>
    </div>

As you can see from above, I have every label field pair wrapped in a p tag so it breaks to the next line, but I am not sure if I need to do this. I want to get city, state, and zip all on the same line, but as soon as I move all the labels and inputs for city,state,zip into one p tag, it looks like the following and I don't know how to fix it.

alt text

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about css