Question

I have this annoying problem where my validation controls refuse to be in the same line as my textboxes.

The one method was to create the controls in a table, but I was not interested in that technique. I attempted a few CSS techniques, but the results were constantly wrong.

I just want the asterisk to appear to the right of the textbox if the textbox does not contain a value.

Any recommendations?

The code is very simple:

<p>
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
<asp:TextBox ID="UserName" runat="server" CssClass="textEntrySmall"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
</p>

and the css:

input.textEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}
input.passwordEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}

Thank you.

Answer 1

In your css try these changes.

p{
    display:table-row;
}
input, span, label{
    display:table-cell;
}

If you have older browsers like IE6, IE7 then use this. It also works in modern browsers.

p {
     white-space:nowrap;
}