Having a totally frustrating experience with older versions of IE, which is where majority of the website traffic comes from. I've tried various versions of code, and nothing has responded in IE

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Tabs using CSS3 Styles</title>

<style type="text/css">
#nav { float:left; width:100%; background:#005daa; line-height:normal;}


#nav ul { margin:0; padding:10px 10px 0 50px; list-style:none;}
#nav li { display:inline; margin:0; padding:0;}
#nav a {
	float:left;
	margin:0;
	margin-right:3px;
	padding:0 0 0 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;

	/* CSS3 */
	border-top-left-radius:10px;
	border-top-right-radius:10px;

	/* Firefox */
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;

	/* Border-Radius for IE */
	behavior: url(border-radius.htc);

	background:#e5e5e7;
	border: 1px solid #999999;
	background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e7), to(#b9b9b9));
	background: -moz-linear-gradient(top,  #e5e5e7,  #b9b9b9);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e7', endColorstr='#b9b9b9');

	}
#nav a span { display:block; padding:5px 6px 4px 6px; text-align:center; color:#005daa; position:relative; left:-6px; width:95%;}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
	background:#9ebf38;
	color:#FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#b0da2e), to(#9ebf38));
	background: -moz-linear-gradient(top,  #b0da2e,  #9ebf38);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0da2e', endColorstr='#9ebf38');
	/* CSS3 */
	border-top-left-radius:10px;
	border-top-right-radius:10px;

	/* Firefox */
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;

	/* Border-Radius for IE */
	behavior: url(border-radius.htc);
	}

#nav a.On span {
	background:#FFFFFF;
	color:#005daa;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#9ebf38));
	background: -moz-linear-gradient(top,  #FFFFFF,  #9ebf38);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#9ebf38');
	/* CSS3 */
	border-top-left-radius:10px;
	border-top-right-radius:10px;

	/* Firefox */
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;

	/* Border-Radius for IE */
	behavior: url(border-radius.htc);
	}

#logoSpot {float:left; width:242px; margin-top:22px; margin-left:20px; border:0px;}
#tabbedNavigation {float:left; margin-top:30px; margin-left:0px;}
</style>
</head>

<body>
<div id="nav">
	<div id="logoSpot"><img src="Logo.jpg" width="242" height="44" alt="Logo" /></div>
    <div id="tabbedNavigation">
        <ul>
            <li><a href="#" title="Our Products"><span>Our Products</span></a></li>
            <li><a href="#" title="In Your Lab"><span>In Your Lab</span></a></li>
            <li><a href="#" title="Special Offers"><span>Special Offers</span></a></li>
            <li><a href="#" title="Games and Prizes"><span>Games &amp; Prizes</span></a></li>
        </ul>
    </div>
</div>

</body>
</html>
I've tried PIE.htc and various other hacks, but can't seem to get any of them to function as described.