I have been using more and more CSS in my designs lately and decided to do an all CSS form. This worked fine for normal labels and text boxes but when I used the DotNetNuke label control the form got all messed up. This is because the DNNLabel has a hidden div with a break in it that messed up the layout. So to get around this I developed the form like this:
<div id="inputform">
<fieldset> <legend>Person of Interest</legend>
<div class="dnnlabel">
<dnn:Label ID="lblLastName" ControlName="txtLastName" ResourceKey="lblLastName" runat="server" />
</div>
<asp:TextBox ID="txtLastName" runat="server" TabIndex="2"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLastName" runat="server" ErrorMessage="Last name is required."
Text="*" ControlToValidate="txtLastName" CssClass="NormalRed"></asp:RequiredFieldValidator><br />
<div class="dnnlabel">
<dnn:Label ID="lblFirstName" ControlName="txtFirstName" ResourceKey="lblFirstName"
runat="server" />
</div>
<asp:TextBox ID="txtFirstName" runat="server" TabIndex="3"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ErrorMessage="First name is required."
Text="*" ControlToValidate="txtFirstName" CssClass="NormalRed"></asp:RequiredFieldValidator><br />
<div class="dnnlabel">
<dnn:Label ID="lblDateOfBirth" ControlName="txtDateOfBirth" ResourceKey="lblDateOfBirth"
runat="server" />
</div>
<asp:TextBox ID="txtDateOfBirth" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvDateOfBirth" runat="server" ErrorMessage="Date of birth is required."
Text="*" ControlToValidate="txtDateOfBirth" CssClass="NormalRed"></asp:RequiredFieldValidator> <asp:HyperLink
ID="cmdDOBCalendar" CssClass="CommandButton" runat="server" TabIndex="4" >[cmdDOBCalendar]</asp:HyperLink><br />
</fieldset>
</div>
With the corresponding CSS:
#inputform { /* set width in inputform, not fieldset (still takes up more room w/ fieldset width */
font:100%;
font-family: Tahoma, Arial, Helvetica;
margin: 0;
padding: 0;
min-width: 500px;
max-width: 600px;
width: 560px;
text-align:left;
}
#inputform fieldset {
/* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
border-color: #000;
border-width: 1px;
border-style: solid;
margin-top:10px;
padding:20px;
}
#inputform fieldset legend {
font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
/* be careful with padding, it'll shift the nice offset on top of border */
}
.dnnlabel {
display: block; /* block float the labels to left column, set a width */
float: left;
width: 150px;
padding: 0;
text-align: right;
margin-right:10px;
margin-top:5px;
}
.inputspan
{
}
#inputform input, textarea, select {
/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
width:auto; /* set width of inputform elements to auto-size, otherwise watch for wrap on resize */
margin-top:5px;
}
#inputform br {
clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
This gives a nicely laid out form with not a table in sight.