image carousel fails in one browser type but not others

[fife]

Hi guy

 

I hope someone can help with this as im really panicking over it.  Ok so im building my first CMS ever!  Its about 5 months down the line. Im self taught so making lots of mistakes but im getting there.  From the beginning I've been using.....

 

http://caroufredsel.dev7studios.com/

 

for image scrollers and such.  Works great!!!!!!  I highly recommend!!!!!!!

 

Basically I've come to check my webpage and it looks great.  my images scroll and my services scroll.  Ive checked it in Crome, firefox, safari, IE8, IE9 and it looks great.  However load it in IE7 and real problems occur.  It seems all my CSS to do with the carousel boxes just gets completely ignored!

 

As much as i dont want to show a site that is working in a awful state with broken links and text im afraid ill have  to for the purpose of this post.

 

Please view the site in any browser then view it in IE 7 and you will see what I mean.

 

wooden.yourarena.co.uk/

 

I have the code for the scroller below.

 

 

$(document).ready(function() {
 
$("#servicescroller").carouFredSel({
width: "100%",
responsive: true,
circular:true,
infinite:true,
height: 340,
items: {
   visible: { min: 3, max: 4 },
   width: 220,
   height: "variable",
  },
scroll: {
   duration: 1000,
   items: 1,
   pauseOnHover: true
   },
auto: 4000,
swipe: true,
mousewheel: true
});
 

$("#foo<?php echo $row['randname'];?>").carouFredSel({
prev : {
button : "#foo_prev",
key : "left",
items : 1,
easing : "easeInOutCubic",
duration : 750
},
next : {
button : "#foo_prev",
key : "right",
items : 1,
easing : "easeInQuart",
duration : 1500
},
 
 
width: 500,
height: 245,
items  : {
visible :1,
minimum: 1,
width: 500,
height: 250,
},
 
 
direction : "up",
 
 
scroll : {
fx:  "crossfade",
 
pauseOnHover: true,
},
auto : {
 
duration : 2000,
timeoutDuration: 5000,
delay: 3000,
pauseOnEvent: 'resume',
}
 
 
 
 
}).find(".<?php echo $row['randname'];?>").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
 

 
 
});

 

I have tried every combination of trailing comma's with and without and nothing seems to fix it.  I can only assume something else on the page is interfering but I cant see what.  I have used this scroller over and over and never had this problem.

 

 

Can someone please at least tell me a way to debug the error or to even find what the error is.  Im in dyer need of help as I have deadlines coming up which I am already way too far behind and I have no clue what the problem is.

 

Thanks for your time guys

 

 

[nogray]

Here is a quick list of errors  found. The last item in an object should not have a comma after it.

height: "variable", // remove this comma
  }
//...

height: 250, // remove this comma
},
//...

pauseOnHover: true, // remove this comma
},
//...

pauseOnEvent: 'resume', // remove this comma

}

[fife]

Nogray thank you very much for your help that has fixed the issue for IE7.  I have just spent a bit of time reading about commas in IE 7 and its problems.  This is not the first time I have made this mistake but I think it will be the last now.  Again thank you