need help in positioning

Question

i am using "beassistance validation" for my form and using tooltip plugin and it work fine except that positioning.

please have a look at this link and i upload my form to get an idea what i am talking about.

what i want is:

if my validation fails i want to display the message after the tooltip icon, but its displaying the message before the tooltip icon. please see here

here is the .css i am using:

validation .css

 #aspnetForm
        {
            width: 670px;
        }
        #aspnetForm label.error
        {
            margin-left: 10px;
            width: auto;
            display: inline;
        }
        form.cmxform
        {
            width: 50em;
        }
        em.error
        { 
            background: url("Images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }
        em.success
        {
            background: url("Images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }
        form.cmxform label.error
        {
            margin-left: auto;
            width: 250px;
        }
        #aspnetForm label.error
        {
            background: url("Images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
        #aspnetForm label.checked
        {
            background: url("Images/checked.gif") no-repeat 0px 0px;
        }
        em.error
        {
            color: black;
        }
        #warning
        {
            display: none;
        }



<asp:Label runat="server" ID='Label8' >Start Date:</asp:Label>
        <asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox>
        <a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!">
            <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a>
        <p>
        </p>
        <asp:Label runat="server" ID='Label9' >End Date:</asp:Label>
        <asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox>
        <a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!">
            <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a>

tooltip.css

#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px 5px;
    color:#333;
    display:none;
    }   

Answer 1

I think you need to float:left your tooltip icon, thus making it appear at the left of error message...

Answer 2

I don't see any fields with an id of tooltip. Just a class. Your css should be .tooltip{} Also, I would enclose the fields in a span, p or other similar inline element so you can predictably float your elements left as per Zuul's recommendation. IE:

EDITED:

<p class="form_row">
    <asp:Label runat="server" ID='Label8' >Start Date:</asp:Label>
    <asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox>
    <a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!">
    <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a>
</p>
<p class="form_row">
    <asp:Label runat="server" ID='Label9' >End Date:</asp:Label>
    <asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox>
    <a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!">
    <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a>
</p>

Then css as:

.form_row {
    position:relative;
    width:400px;
}
#aspnetForm label.error {
    float:right;
}

I used simple html elements in this example for simplicity sake as I am not too familiar with how asp creates those controls. But you get the idea.

EDITED:

The edits above will get you closer to what you want, but you might want to consider revising your element structure into something more maintainable.

Answer 3

Just add position:absolute; in #aspnetForm label.error css