1) You missed the id out of the list so the left psoition isn't reset correctly.
2)You can place the images after the anchor and then place them absolutely where you want.
3) the message div was just for the outline to show a where the mesdsage would appear and is not needed.
Heres the code updated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FACE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash mac hiding hack \*/
html, body{height:100%;}
/* end hack */
body {
padding:0;
margin:0;
background:#000000;
color: #000000;
text-align:center;
}
#wrapper{
height:100%;
min-height:100%;
margin-left:auto;
margin-right:auto;
width:800px;
text-align:left;
background:#000000 url(background-swoosh.png) no-repeat;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
position:relative;/*stacking context*/
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #af1e2d;
text-align:left;
position:relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
text-indent: 15pt;
vertical-align: middle;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
ul#links img {
position:absolute;
margin:0;
padding:0;
left:0px;
top:35px;
visibility: hidden;
text-decoration: none;
}
li a span {
position:absolute;
top:-50px;
left:75px;
width:500px;
height:125px;
visibility:hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: normal;
color: #f2bf49;
text-decoration: none;}/*hide text initially*/
ul#links li#face a span {left:0px}
ul#links li#resource a span {left:-200px}
ul#links li#training a span {left:-400px}
ul#links li#action a span {left:-600px}
ul#links {
margin:0;
padding:0;
list-style:none;
width:800px;
position:relative;
}
ul#links li{
margin:0;
padding:0;
float:left;
width:200px;
text-align:left;
left: 0px;
top: 300px;
color:yellow;
}
li#face,li#resource,li#training, li#action, {position:relative;/*stacking context*/}
li {position:relative}
ul#links a {
color:#af1e2d;
background:#000;
display:block;
padding-bottom:10px;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 23pt;
font-weight: bolder;
}
ul#links a:hover {
background:#000;/* background or some other property must change for ie*/
border-bottom:10px solid black;
padding-bottom:0;
}
ul#links a:hover img {visibility:visible}
ul#links a:hover span {visibility:visible}
ul#links li span.bar{position:absolute;right:15px;top:5px}
</style>
</head>
<body>
<div id="wrapper">
<ul id="links">
<li id="face"><a href="#">About Face<img src="images/LinkOneUnderline.png" border="0" /><span>this
is the text that is associated with the about face link</span> </a><span class="bar"> | </span></li>
<li id="resource"><a href="#">Resources<img src="images/LinkTwoUnderline.png" border="0" /><span>this
is the text that is associated with the resource link</span> </a><span class="bar"> | </span></li>
<li id="training"><a href="#">Training<img src="images/LinkThreeUnderline.png" border="0" /><span>this
is the text that is associated with the training link</span> </a><span class="bar"> | </span></li>
<li id="sep3"><img src="images/Seperator3.png"></li>
<li id="action"><a href="#">Action<img src="images/LinkFourUnderline.png" border="0" /><span>this
is the text that is associated with the action link</span> </a> </li>
</ul>
<div id="clearfooter"></div>
<!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"><font color="#FFFFFF">FACE<font size="1">® <font size="2">Resources.
Training. Action. </font></font></font></div>
<div id="header"> </div>
</body>
</html>
The footer is now working proplerly and the text appears in the right place. The only thing you will need to do is replace the "|" with whatever image you require. As the text is different sizes you may want to set up an id for each span and place each image slightly differently in order to center it.
The techiques are in place so just copy the format of the existing one 
Paul
Bookmarks