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?
 
Tomarse111Connect With a Mentor Commented:
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
 
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
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
garethtnashAuthor Commented:
Thanks Tomarse, do you know whether it will work on all versions of IE (5.5 - 8)
 
Thank you
0
 
garethtnashAuthor Commented:
Thanks Tomarse
0
 
garethtnashAuthor Commented:
Excellent and Fast responce
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.