I'm working on a website for a local enterprise charity and I'm having problems getting everything to work in ie7. It works on every other browser I've tested, and passes when it goes through w3's validator.

my navigation on the left doesnt work in ie7, the links are there when I look at the under developer tools (and of course they're there and working in other browsers).

Also the jquery isn't loading properly for the gallery slider, the buttons and the bullets to show which picture is being viewed are there but the images themselves aren't!

Here's the url http://www.youthenterprise.co.uk/new...ed/gallery.php

here's the 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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hull Ready - the future is ours</title>

<link href="style/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style/orbit-1.2.3/orbit-1.2.3.css">
<!--[if IE 7.0]>
<link rel="stylesheet" href="style/ie7.css" type="text/css" />


<div id="header">
<div class="logo"></div>
<div class="tabs">
<li><a href="students.php" class="tab_student"></a></li>
<li><a href="teachers.php" class="tab_teacher"></a></li>
<li><a href="employers.php" class="tab_employer"></a></li>

</div><!--tabs close-->
</div><!--header close-->
<div class="clear"></div>
<div id="wrapper">
<div class="content">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="style/orbit-1.2.3/jquery.orbit-1.2.3.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {

<div id="featured">
<img src="images/gallery/01.gif" alt="01">
<img src="images/gallery/02.gif" alt="02">
<img src="images/gallery/03.gif" alt="03">
<img src="images/gallery/04.gif" alt="04">
<img src="images/gallery/05.gif" alt="05">
<img src="images/gallery/06.gif" alt="06">
<img src="images/gallery/07.gif" alt="07">
<img src="images/gallery/08.gif" alt="08">
<img src="images/gallery/09.gif" alt="09">
<img src="images/gallery/10.gif" alt="10">
<img src="images/gallery/11.gif" alt="11">
<img src="images/gallery/12.gif" alt="12">
<img src="images/gallery/13.gif" alt="13">
<img src="images/gallery/14.gif" alt="14">
<img src="images/gallery/15.gif" alt="15">
<img src="images/gallery/16.gif" alt="16">
<img src="images/gallery/17.gif" alt="17">
<img src="images/gallery/18.gif" alt="18">
<img src="images/gallery/19.gif" alt="19">
<img src="images/gallery/20.gif" alt="20">
<img src="images/gallery/21.gif" alt="21">
<img src="images/gallery/22.gif" alt="22">
<img src="images/gallery/23.gif" alt="23">
<img src="images/gallery/24.gif" alt="24">
<img src="images/gallery/25.gif" alt="25">
<img src="images/gallery/26.gif" alt="26">
<img src="images/gallery/27.gif" alt="27">
<img src="images/gallery/28.gif" alt="28">
<img src="images/gallery/29.gif" alt="29">
<img src="images/gallery/30.gif" alt="30">
<img src="images/gallery/31.gif" alt="31">
<img src="images/gallery/32.gif" alt="32">
<img src="images/gallery/33.gif" alt="33">
<img src="images/gallery/34.gif" alt="34">
<img src="images/gallery/35.gif" alt="35">
<img src="images/gallery/36.gif" alt="36">
<img src="images/gallery/37.gif" alt="37">
<img src="images/gallery/38.gif" alt="38">
<img src="images/gallery/39.gif" alt="39">
<img src="images/gallery/40.gif" alt="40">
<img src="images/gallery/41.gif" alt="41">
<img src="images/gallery/42.gif" alt="42">
<img src="images/gallery/43.gif" alt="43">

</div><!--featured close-->
</div><!--content close-->

</div><!--wrapper close-->

<div id="nav">
<li><a href="" title="Home">Home</a></li>
<li><a href="/about.php" title="About">About</a></li>
<li><a href="/news.php" title="News">News</a></li>
<li><a href="/resources.php" title="Resources">Resources</a></li>
<li><a href="/newsletters.php" title="Newsletters">Newsletters</a></li>
<li><a href="/gallery.php" title="Gallery">Gallery</a></li>
<li><a href="/5blossom.php" title="Make 5 Blossom">Make 5 Blossom</a></li>
<li><a href="/big13.php" title="The Big 13">The Big 13</a></li>
<li><a href="/warwick.php" title="The Warwick Award">The Warwick Award</a></li>
<li><a href="/young.php" title="Young Entrepreneurs">Young Entrepreneurs</a></li>
<li><a href="/game.php" title="Interactive Game">Interactive game</a></li>
<li><a href="/links.php" title="Links">Links</a></li>
<li><a href="/partners.php" title="Partners">Partners</a></li>
<li><a href="/contact.php" title="Contact us">Contact us</a></li>
</div><!--nav close-->

<div class="clear"></div>

<div id="footer">
<div class="logos"></div>

here's the CSS (in case it's needed)
html {overflow-y: scroll;}

body {
margin: 0 auto;
font-size: 100%;

.float-left {float: left; padding-right: 10px;}
.float-right {float: right; padding-left: 10px;}
.clear {clear: both;}

h1 {font-family: Arial, Helvetica, sans-serif; font-size: 36px; color: #000; margin: 0; padding: 0;} /*headings*/
h2 {font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; font-weight: normal;} /*body text*/
h3 {font-family:Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; margin: 0; padding: 0; color: #cd0015;}/*news subheads*/
h4 {font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #000; margin: 0; padding-bottom: 10px; font-weight: bold;}/*links*/

a {color: #cd0015; text-decoration: none;}
a:hover {color: #ffa200; text-decoration: none;}
a:visited {color: #cd0015; text-decoration: none;}

#header {
width: 960px;
height: 120px;
margin: 0 auto;

#header .logo{
background:url(images/logo.gif) top left no-repeat;
width: 363px;
height: 112px;
margin-top: 20px;

#header .tabs {
width: 500px;
margin: -148px auto;
float: right;

#header .tabs ul {
width: 500px;
list-style: none;

#header .tabs ul li {
float: left;
width: 162px;
height: 92px;

#header .tabs ul li a{display: block; height: 92px; outline: none;}

#header .tabs ul li a.tab_student{background:url(images/tabs.gif) #cd0015 0 0 no-repeat; width: 162px; height: 92px;}
#header .tabs ul li a.tab_teacher{background:url(images/tabs.gif) #cd0015 -163px 0 no-repeat; width: 162px; height: 92px;}
#header .tabs ul li a.tab_employer{background:url(images/tabs.gif) #cd0015 -326px 0 no-repeat; width: 130px; height: 92px;}

#header .tabs ul li a:hover.tab_student{background:url(images/tabs.gif) #cd0015 0 -92px no-repeat; width: 162px; height: 92px;}
#header .tabs ul li a:hover.tab_teacher{background:url(images/tabs.gif) #cd0015 -163px -92px no-repeat; width: 162px; height: 92px;}
#header .tabs ul li a:hover.tab_employer{background:url(images/tabs.gif) #cd0015 -326px -92px no-repeat; width: 130px; height: 92px;}

#header .tabs ul li.active a.tab_student{background:url(images/tabs.gif) #cd0015 0 92px no-repeat; width: 152px; height: 92px;}
#header .tabs ul li.active a.tab_teacher{background:url(images/tabs.gif) #cd0015 162px 92px no-repeat; width: 152px; height: 92px;}
#header .tabs ul li.active a.tab_employer{background:url(images/tabs.gif) #cd0015 326px 92px no-repeat; width: 152px; height: 92px;}

#wrapper {
width: 960px;
margin: 0 auto;
z-index: 10;

#wrapper .content{
width: 625px;
padding: 20px;
float: right;
margin-left: 280px;
margin-top: 30px;

#wrapper .content-divider {
border-top: solid 1px #cd0015;

#nav {
width: 280px;
display: block;
margin-left: -1000px;
margin-top: 40px;
float: left;

#nav ul {
list-style: none;
display: block;
text-align: right;

#nav ul li {
width: 275px;
text-align: right;
margin-left: 1000px;
padding-top: 5px;
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
margin-bottom: 20px;

#nav ul li a {
color: #000;
background: url(images/nav.gif) right 0 no-repeat #ffa200;
height: 29px;
margin-left: -700px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 500px;
padding-right: 20px;
text-align: right;

#nav ul li a:hover {
background: url(images/nav-hover.gif) right 0 no-repeat #cd0015;
padding-left: 500px;
padding-right: 20px;
color: white;

#nav ul li a:current {
background:url(images/nav-hover.gif) #cd0015 right 0 no-repeat;
padding-right: 20px;

#footer {
width: 960px;
margin: 0 auto;
margin-bottom: 50px;
padding-bottom: -50px;

#footer .logos {
background:url(images/footer_full.gif) 0 0 no-repeat;
width: 645px;
height: 76px;
float: right;
The jquery is a licence free download called orbit. I'll post the css for it if its needed?
I have googled an answer the the problem an checked all the little details they suggested (moving the $document.ready which I don't have, making sure it's set at text/javascript instead of application/javascript...)