3 replies [Last post]
The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 43 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

As stated in title, I've been having problems getting my input textboxes to line up vertically while having the form in the center of the parent element.
Here is my code:

HTML:

 <div id="form">
 
        <form id="Form1" runat="server" onsubmit="return formValidate()">
 
 
 
        <div id="namePos">
 
           <p>First name: <asp:TextBox ID="inputFirstName" runat="server" /></p>
 
            <p>Last name: <asp:TextBox ID="inputLastName" runat="server" /></p>
 
            <div id="nameErr" class="errM"></div>
 
        </div>
 
 
 
        <div id="emailPos">
 
            <p>E-mail: <asp:TextBox ID="inputEmail" runat="server" /></p>
 
            <div id="emailErr" class="errM"></div>
 
        </div>
 
 
 
        <div id="iNumPos">
 
            <p>INumber: <asp:TextBox ID="inputINumber" runat="server" /></p>
 
            <div id="iNumErr" class="errM"></div>
 
        </div>
 
 
 
        <div id="managerIDPos">
 
            <p>Manager ID: <asp:TextBox ID="inputManagerID" runat="server" /></p>
 
            <div id="managerIDErr" class="errM"></div>     
 
        </div>
 
 
 
        <div id="modelIDPos">
 
            <p>User ID: <asp:TextBox ID="inputModelID" runat="server" ToolTip="optional but recommended" /></p>
 
            <div id="modelIDErr" class="errM"></div>
 
        </div>
 
 
 
        <div id="datePos">
 
            <p>Start date (MM/DD/YYYY): <asp:TextBox ID="inputStartDate" runat="server" /></p>
 
            <p>End date (MM/DD/YYYY): <asp:TextBox ID="inputEndDate" runat="server" /></p>
 
            <div id="dateErr" class="errM"></div>
 
        </div>
 
    </div>
 
        <p class="textcenter"><asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" /></p>        
 
        </form>

CSS:

#form {
 
}
 
 
 
.textcenter {text-align: center;}
 
 
 
 
 
div.error{   
 
                display: block !important;
 
                border: 1px solid #F9B9B2;
 
                background-color: #FFDFDF;
 
}
 
 
 
.errM{
 
                color:red;
 
                font-size: small;
 
}

The .errM and .error classes are activated using javascript upon receiving bad input. The block is supposed to all turn pinkish. When I do something like text-align: right; padding-right: 150px;, the form looks fairly centered but the pink background stops at the 150px of the padding.

Unfortunately I do not have a live page to show the issue.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 1 week ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

send us the full code. or

send us the full code. or else upload some server and give it me some link:

The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 43 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

This is the full code. There

This is the full code. There is just an extra centered div in the Master Page file that holds all of this

Div:

<center>
<div id="template">
<!--form here-->
</div>
</center>

CSS for outer div:

template{
     border:2px #666 solid;
}

The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 43 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

anyone?

anyone?