jquery prepend working in all borwsers except IE7

Question

Arrg! My site (in progress) is working great so far in all browsers I've tested to-date (firefox, safari, chrome, and IE8) but not in IE7 (I dont know about IE6 or other browsers) .... I'm not positive but i think the issue has to do with the use of prepend() in my jQuery. the main issues are the main menu (should show up in the blue horizontal bar to the left of the logo) as well as the search box at the top right, both added using prepend. there are other issues throughout in IE7 so i'm not sure if I'm on track thinking it's from the jQuery or not, or if there is a typo somewhere in my current mess of css!

Here is the script I'm using for the main menu which is not working in IE7, but works in other browsers - does anyone see a problem here?

<script type="text/javascript">
<!--
$(function() {

/* ************************************** */
/* main menu */
/* ************************************** */
$("#bannerAreaWrapper").prepend("<div id='MainMenu'><a id='neutralsBtn' class='MainMenuModule' href='/neutrals-overview/'>Neutrals</a> <span class='bullet'>•</span> <a id='practicesBtn' class='MainMenuModule' href='/practices/'>Practices</a> <span class='bullet'>•</span> <a id='locationsBtn' class='MainMenuModule' href='/locations/'>Locations</a></div>");

});
-->
</script>

Here is the link to the site: http://www.agencydr.squarespace.com Help is appreciated!!

Answer 1

your prepend function works fine when I run it through the dev toolbar script console on IE7 although it doesn't work on load. You are getting a js error on IE8 and two on IE7. The additional one on IE7 is to do with this function:

$('#LocationsMapWrapper').hover(function() {
   $('#LocationsMapWrapper #MapImage').animate({
      width: 600,
      height: 375,
      marginLeft: 550,
      marginTop: -20,
   }, "slow", "easeOutQuad");
 }

line 139 specifically

Try removing this and see if the navigation works as expected on page load

EDIT

Boom, got it.

Try removing the comma after 'marginTop: -20,' The last element shouldn't have this, think it affects all older browsers

Answer 2

IE7 is finding two javascript errors in your site:

Expected identifier, string or number line 139
$('#LocationsMapWrapper').hover(function() {
   $('#LocationsMapWrapper #MapImage').animate({
      width: 600,
      height: 375,
      marginLeft: 550,
      marginTop: -20,                <---- remove comma
   }, "slow", "easeOutQuad");
 }

 'document.getElementById(...)' is null or not an object line 355
Shadowbox.setup(document.getElementById('Map').getElementsByTagName('area'), {width : 450, height : 400});