Widget problems only in IE

My first WordPress site

Displays fine in Chrome and Firefox but in IE one of my widgets in the sidebar doesn’t work.

Its a text widget in which I’ve included HTML / javascript produce the navigation buttons like on the rest of my site.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<base href="http://www.whitfieldvillagepantry.co.uk" />
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
	hmbuttonup       = new Image();
    hmbuttonup.src   = "images/navbtn_hm1.png" ;
    hmbuttondown       = new Image();
    hmbuttondown.src   = "images/navbtn_hm2.png" ;
    otbuttonup       = new Image();
    otbuttonup.src   = "images/navbtn_ot1.png" ;
    otbuttondown       = new Image();
    otbuttondown.src   = "images/navbtn_ot2.png" ;
	scbuttonup       = new Image();
    scbuttonup.src   = "images/navbtn_sc1.png" ;
    scbuttondown       = new Image();
    scbuttondown.src   = "images/navbtn_sc2.png" ;
	ecbuttonup       = new Image();
    ecbuttonup.src   = "images/navbtn_ec1.png" ;
    ecbuttondown       = new Image();
    ecbuttondown.src   = "images/navbtn_ec2.png" ;
	makebuttonup       = new Image();
    makebuttonup.src   = "images/navbtn_make1.png" ;
    makebuttondown       = new Image();
    makebuttondown.src   = "images/navbtn_make2.png" ;
	blbuttonup       = new Image();
    blbuttonup.src   = "images/navbtn_bl3.png" ;
    blbuttondown       = new Image();
    blbuttondown.src   = "images/navbtn_bl2.png" ;
	findbuttonup       = new Image();
    findbuttonup.src   = "images/navbtn_find1.png" ;
    findbuttondown       = new Image();
    findbuttondown.src   = "images/navbtn_find2.png" ;  

}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>
<ul id="nav" class="floatleftclear">
<li><a href="index.html"  onmouseover="buttondown('hmbutton')"  onmouseout="buttonup('hmbutton')"><img src="images/navbtn_hm1.png" name="hmbutton" border="0" /></a></li>
<li><a href="openingtimes.html"  onmouseover="buttondown('otbutton')"  onmouseout="buttonup('otbutton')"><img src="images/navbtn_ot1.png" name="otbutton" border="0" /></a></li>
<li><a href="cafe.html"  onmouseover="buttondown('scbutton')"  onmouseout="buttonup('scbutton')"><img src="images/navbtn_sc1.png" name="scbutton" border="0" /></a></li>
<li><a href="events.html"  onmouseover="buttondown('ecbutton')"  onmouseout="buttonup('ecbutton')"><img src="images/navbtn_ec1.png" name="ecbutton" border="0" /></a></li>
<li><a href="blog.html"  onmouseover="buttondown('blbutton')"  onmouseout="buttonup('blbutton')"><img src="images/navbtn_bl3.png" name="blbutton" border="0" /></a></li>
<li><a href="findus.html"  onmouseover="buttondown('findbutton')"  onmouseout="buttonup('findbutton')"><img src="images/navbtn_find1.png" name="findbutton" border="0" /></a></li>
<li><a href="make.html"  onmouseover="buttondown('makebutton')"  onmouseout="buttonup('makebutton')"><img src="images/navbtn_make1.png" name="makebutton" border="0" /></a></li>
 </ul>

Can anyone suggest why?

Thanks