jQuery functions not working in IE

[ojdude]

Hi,

I'm having a problem with getting my jQuery to work on Internet Explorer. The version I tried it on is 8.

The concept is that the div containers animate up or down when button is clicked, and the contents (also in a div container) are toggled on and off as it happens. It works perfectly in Firefox and Safari, however it doesn't work at all in IE. Even the rounded corners jQuery script doesn't seem to work.

Does anyone have an idea of why this doesn't work? I'd love some feedback.

Here's the jQuery script:

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>


<script src="Scripts/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Scripts/jquery.corner.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function() {

var webBox = "closed";

$("#box-web").corner();
$(".box-border").corner();

$("#arrow-web").click(function() {

if (webBox == "closed"){
$("#box-web").animate({
height: "230px"
});
$("div#toggle-web").toggle();
webBox = "open";

} else {

$("#box-web").animate({
height: "50px"
});
$("div#toggle-web").toggle();
webBox = "closed";

}
});

$("#arrow-motion").click(function() {

if (motionBox == "closed"){
$("#box-motion").animate({
height: "230px"
});
$("div#toggle-motion").toggle();
motionBox = "open";

} else {

$("#box-motion").animate({
height: "50px"
});
$("div#toggle-motion").toggle();
motionBox = "closed";

}
});

});
</script>



And here's the HTML




<div class="box-border"> <!-- contains a white background with jQuery corner script applied -->
<div class="box-inside"> <!-- inside box wrap -->
<h2>TITLE GOES HERE</h2>

<div class="arrows"> <!-- contains up and down TOGGLE arrows -->
<a href="#"><div id="arrow-web"></div></a>
</div> <!-- end arrows -->

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

<div id="toggle-web"> <!-- div to toggle the enclosed content's visibility on/off -->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div> <!-- End of content-web toggle -->

</div> <!-- End inside wrap -->
</div> <!-- End Box Border -->
</div> <!-- End of the Main Box -->

And here are the CSS Elements:

#box-web { width: 595px; height: 50px; margin: 1px 0; background: #df6e00; position: relative;}
#box-web .box-border { margin: 3px; background: #FFFFFF; height: 86%; }

.box-inside { padding: 10px 20px; }


.arrows { width: 55px; height: 44px; position: absolute; top: 10px; right: 50px; }

#arrow-web { float: left; width: 48px; height: 21px; background: url(images/services/arrows.gif); }

#arrow-motion { float: left; width: 48px; height: 21px; background: url(images/services/arrows.gif); }


div#toggle-web { display: none; }




I would very greatly appreciate any advice, or if you could point me in the right direction.

Thanks in advance,
Owen