<li> and <a href=""> tags

[LinuxGold]

Following is the current code that works in FF (neglecting IE since Intranet runs on FireFox anyway) where CSS highlights the hoovered <ul> part. I am trying to figure out how to set up <a href="student.php?ID=1">1</a> immediately after "ID:" part in <ul> section and use the <a> when <ul> part is hoovered and clicked. I can not do the following as it invalidates the html check:

<a href="foo"><ul><li>foo</li>....</li></ul></a>

Here is the existing code:

body {
background-color:#fff;
color:#000;
font-family:arial;
font-size:1em;
}
ul.student {
list-style:none;
margin:0;
padding:0;
margin-bottom:10px;
width:250px;
border-width:1px;
border-style:solid;
}
ul.odd {
border-color:#e0e0e0;
}
ul.even {
border-color:#f0f0f0;
}
ul.student li span {
display:block;
float:left;
clear:left;
width:90px;
text-align:right;
padding-right:5px;
font-weight:bold;
font-size:.9em;
}
ul.odd:hover {
background-color:#e0e0e0;
}
ul.even:hover {
background-color:#f0f0f0;
}

<ul class="student odd">
<li><span>ID: </span>
<a href="students.php?ID=1">1</a></li>
<li><span>Name:</span> Scott R Hamm</li>
<li><span>DOB:</span> 1971-02-23</li>
<li><span>Start Date:</span> 2005-11-07</li>
</ul>

[Fotiman]

Your data is technically speaking NOT a list. It would be more accurately displayed as a table.

For example:

<table class="student">
<tr>
<th>ID:</th>
<td><a href="students.php?ID=1">1</a></td>
</tr>
<tr>
<th>Name:</th>
<td>Scott R Hamm</td>
</tr>
<tr>
<th>DOB:</th>
<td>1971-02-23</td>
</tr>
<tr>
<th>Start Date:</th>
<td>2005-11-07</td>
</tr>
</table>

In which case, you might be able to give your "a" a display: block; to achieve what you're trying to achieve.

Just my 2 cents.