Buttons in IE

Buttons in IE

Maybe I'm just a moron, but I seem to be having a problem with the buttons. I set up a simple menu bar using, for the most part, the same layout and configuration for the jQuery buttons on the demo. They work just fine with Chrome and Firefox, but for some strange reason they do not work in IE. When I load the page in IE I just see the radio buttons in their natural form, rather than the skins that should appear.

I'm still a novice in javascript and css so I wouldn't be surprised if I'm just being a water-headed retard and forgetting/screwing up something simple.

Here is my 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>Dart Construction</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/navigation.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/getQuoteRequestProcess.js"></script>
    <script type="application/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="application/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#radio").buttonset();
        });
    </script>
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
    
    <script>
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
</script>
    
    <script type="text/javascript">
function selectPage(buttonID, page)
{
ajaxpage(page, 'content');
setCheckedValue(document.menuBar.elements['radio'], buttonID);
}
</script>
    
    <!—[if lt IE 7]>
     <link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]—>
</head>

<body onload="selectPage('1', 'home.html');">
<div id="container">
    <div id="header">
     <div id="logo">
         <img src="images/logo.gif" width="200" height="160" alt="" />
        </div>
     <h5 id="headerInfo">Dart Construction</h5>
        <h5 id="headerInfo">700 tower Dr.</h5>
        <h5 id="headerInfo">Suite 110</h5>
        <h5 id="headerInfo">Troy, MI  48098</h5>
        <h5 id="headerInfo">(810) 343-2810</h5>
        <h5>
         <a id="headerInfo" href="mailto:dartcon@townemortgage.com"> dartcon@townemortgage.com</a>
        </h5>
    </div>
    
    <div id="navigation" align="center">
        <form name="menuBar" target="">
            <div id="radio">
                <input type="radio" id="home" name="radio" onclick="ajaxpage('home.html', 'content');" value="1"/>
                <label for="home">Home</label>
                
                <input type="radio" id="services" name="radio" onclick="ajaxpage('services.html', 'content');" value="2"/>
                <label for="services">Services</label>
                
                <input type="radio" id="getQuote" name="radio" onclick="ajaxpage('getQuote.html', 'content');" value="3"/>
                <label for="getQuote">Get A Quote</label>
                
                <input type="radio" id="getFinance" name="radio" onclick="ajaxpage('getFinanced.html', 'content');" value="4"/>
                <label for="getFinance">Get Financed</label>
                
                <input type="radio" id="contact" name="radio" onclick="ajaxpage('contactUs.html', 'content');" value="5"/>
                <label for="contact">Contact Us</label>
            </div>
        </form>
    </div>
    
    <div id="content"></div>
    
    <div id="footer" align="center">
     <a id="footerLinks" href="javascript:setCheckedValue(document.forms['menuBar'].elements['radio'], '1');">Home</a>
        <a id="footerLinks" href="javascript:ajaxpage('services.html', 'content');">Services</a>
        <a id="footerLinks" href="javascript:ajaxpage('home.html', 'content');">Get A Quote</a>
        <a id="footerLinks" href="javascript:ajaxpage('home.html', 'content');">Get Financed</a>
        <a id="footerLinks" href="javascript:ajaxpage('home.html', 'content');">Contact Us</a>
     <hr />
     <p>Copyright© (need date range) Dart Construction Co. | All rights reserved</p>
    </div>
    
<div class="clearfooter">
    </div>
    
</div>
    
<div id="schematic">
<img src="images/schematic1.gif" width="100%" height="100%" alt="" />
</div>

</body>
</html>

They buttons show up like this,  http://jqueryui.com/demos/button/#radio, in Chrome and Firefox but as regular radio buttons in IE. I have tried upgrading IE on my workstation, as IT has everyone on IE6. I thought that would work but alas no go. I guess that was just trading a douche for a turd sandwich. I would appreciate some help on this if anyone has any thoughts. I'm using the style sheets that you're supposed to download with the jQuery scripts, I have not changed them.