I've designed this test page:-

http://www.step-up-to-science.com/bi...reWs/test.html

I've put a bottom border on the top right links: 'Skip to contents' and 'Skip to navigation'. It works fine in Firefox, but in IE6, the bottom border doesn't show. I've put these links inside a 'skip' div. This is floated and is contained within a 'head' div which is relatively positioned. This is the relevant CSS.

Code:
#head {
	color: #000000;
	position: relative;
	height: 20px;
	width: 768px;
	font: 1.0em Arial, Helvetica, Verdana, sans-serif;
	background: #003366;
	padding-bottom: 25px;
	}

.skip {
	color: #FFFFFF;
	position: absolute;
	top: 0px;
	right: 0px;
	/*width: 538px;*/
	/*height: 40px;*/
	font: 1.0em Arial, Helvetica, Verdana, sans-serif;
	padding-top: 0px;
	padding-right: 10px;
	background: #003366;
	}
	
.skip li {
	position: relative;
	float: right;
	list-style-type: none;
	padding: 0px 7px; 
	}
	
.skip a:link {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 0.5px solid #FFFFFF;
	font-weight: bold;
}

.skip a:visited {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 0.5px solid #FFFFFF;
	font-weight: bold;
}

.skip a:hover {
	color: #FFFFFF;
	text-decoration: none;
	border: none;	
}
and this the HTML

Code:
<div id="head">
	 
	  <ul class="skip">
			<!--open skip div-->	
			<li><a href="#main">Skip to contents</a></li>
			<li><a href="#navmenu">Skip to navigation</a></li>			
	  </ul>
			<!--close skip div-->
			</div>
Can anyone help?

Thank you very much.