Form Hints on a Form using <ul>

I've seen a nifty little Form Hint Tut,  here http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html
 the problem that i have is that this uses <dl> <dt> and <dd> wheras my forms have all been built using <ul><li> etc,

I've tried changing the form, but can't get it to work, but ideally i would like to keep my forms using <ul>&<li>
is there any way to do this, really I only want to put a form hint on the taMessage input and therefore remove the <legend> as this doesn't look right...

Please help
<form ACTION="<%=MM_editAction%>" METHOD="POST" enctype="multipart/form-data" name="form1" id="form1" onSubmit="return validateform1(this);checkFileUpload(this,'TXT, DOC, RTF, PDF',true,'','','','','','','');return document.MM_returnValue">
    <h4>Profile Management</h4>
<ul>              <li><label>Profile Name*:</label><input name="ProfileName" type="text" id="ProfileName" maxlength="50" />
              </li>
              <li><label>Job Category*:</label><select name="jscat2" id="jscat2">
                <option value=" ">Select</option>
                <%
While (NOT Categories.EOF)
%>
                <option value="<%=(Categories.Fields.Item("JBCategoryValue").Value)%>"><%=(Categories.Fields.Item("JBCategoryLabel").Value)%></option>
<%
  Categories.MoveNext()
Wend
If (Categories.CursorType > 0) Then
  Categories.MoveFirst
Else
  Categories.Requery
End If
%></select>
              </li>
              <li><label>Location*:</label><select name="jsloc2" id="jsloc2">
                <option value=" ">Select</option>
                <%
While (NOT Locations.EOF)
%>
                <option value="<%=(Locations.Fields.Item("JBLocation").Value)%>"><%=(Locations.Fields.Item("JBLocation").Value)%></option>
                <%
  Locations.MoveNext()
Wend
If (Locations.CursorType > 0) Then
  Locations.MoveFirst
Else
  Locations.Requery
End If
%>
                </select></li>
              <li><label>Contract Type*:</label><select name="contracttype" id="contracttype">
                  <option value="Temporary">Temporary</option>
                  <option value="Contract">Contract</option>
                  <option value="Permanent">Permanent</option>
          </select></li>
              <li><label>Salary Expectation*:</label><input name="salary" type="text" id="salary" maxlength="50" />
              </li>
              <li><label>Overview*:<legend>Your Profile Overview is the part of your profile that recruiters can perform keyword searches against, your profile should therefore highlight your qualifications, previous roles and strengths</legend>
              </label>
                <textarea name="taMessage" id="taMessage" rows="11"
onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);" onBlur="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);" onFocus="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);"" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);" onMouseOut="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);"></textarea>
             <br />
            <span id="charcount">0</span> characters entered.   | <span id="remaining">2500</span> characters remaining.<br /></li>
              <li>
                <label>CV*:</label>
                <input name="cv" type="file" id="cv" onChange="checkOneFileUpload(this,'TXT, DOC, RTF, PDF',true,'','','','','','','')" />
              </li>
              <li><label>Get Head hunted</label><input name="headhunted" type="checkbox" id="headhunted" value="Y" />
              </li>
              <li>
                <label>
                <input type="submit" name="RegisterBut" id="RegisterBut" value="Create" />
                </label>
              </li></ul>
    <input name="siteid" type="hidden" id="siteid" value="<%= Session("SITEID") %>" />
        <input name="candidateid" type="hidden" id="candidateid" value="<%= Session("CANDID") %>" />
        <input type="hidden" name="MM_insert" value="form1" />
</form>

Open in new window

garethtnashAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tomarse111Commented:
Judging by the code from http://www.askthecssguy.com/examples/formfieldhints/example06.html the scripts for the hints only cater for input and selects, so we need to create one for textarea (See below)

You also need to add the span with the hint in directly after the textarea (within the li)

<span class="hint">Hint in here.<span class="hint-pointer">&nbsp;</span></span>

//Add the following code into your script
 
	var selects = document.getElementsByTagName("textarea");
	for (var k=0; k<selects.length; k++){
		if (selects[k].parentNode.getElementsByTagName("span")[0]) {
			selects[k].onfocus = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
			}
			selects[k].onblur = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
			}
		}
	}

Open in new window

0
Tomarse111Commented:
It doesn't actually matter if its using dl's, dt's, ul's or li's.

You will also need to make sure you have have all of the correct styles (see below) and the pointer.gif from:

http://www.askthecssguy.com/examples/formfieldhints/pointer.gif


<style type="text/css">
/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}
 
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}
</style>

Open in new window

0
garethtnashAuthor Commented:
Thanks Tomarse, do you know whether it will work on all versions of IE (5.5 - 8)
 
Thank you
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tomarse111Commented:
Not sure to be honest with you, I've tested it on IE6 and IE7 and it works fine for those. I don't have 5.5 or 8 so I can't be 100% sure.

The other thing I've found is there is a text area example on the site:

http://www.askthecssguy.com/examples/formfieldhints/example07.html

:-)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
garethtnashAuthor Commented:
Thanks Tomarse
0
garethtnashAuthor Commented:
Excellent and Fast responce
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.