need help in positioning

Posted by teki on Stack Overflow See other posts from Stack Overflow or by teki
Published on 2010-06-02T15:17:55Z Indexed on 2010/06/02 17:34 UTC
Read the original article Hit count: 161

Filed under:

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;
    }   

© Stack Overflow or respective owner

Related posts about jQuery