Weird IE7&8 Problem

[CodingNic]

OK, I have only been designing and deveploing sites for just a little bit. I am working on a site for a tattoo studio. They wanted a "knob" that turns. OK no problem just a little jQuery. It works; however; in IE 7 & 8 the knob "flys" to a new postion when it rotates. I have no clue why or how to fix it. Any help with how to over come this problem would be great!

here is a snip of the css code:

body {
background-color: #000;
}


img {
border: none;
}


/***** wrapper *****/
.wrapper {
width: 1280px;
height: 750px;
background-color: #CCC;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
padding: 0;
margin-bottom: 0px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
}

/***** header *****/
.header {
width: inherit;
height: 200px;
background-color: #FFF;
background-image: url(../images/header.jpg);
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
padding: 0;
margin:0;
}

.headerSpacer {
width: inherit;
height: 20px;
background-color: #000;
padding: 0;
margin: 0;
}

.header img {
margin-top: 15px;
float: right;

}

/***** insideWrapper *****/

.insideWrapper {
width: inherit;
height: 580px;
padding: 0;
margin: 0;
background-image: url(../images/inner.jpg);
background-repeat: repeat;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

/***** content wrapper *****/

.contentWrapper {
background-color: transparent;
background-image: url(../images/content.png);
width: 1250px;
height: 538px;
position:absolute;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
/***** navBar ****/
.navBar {
width: 1210px;
height: 120px;
background-color: transparent;
position: absolute;
margin: 20px 20px;
background-image: url(../images/header2.jpg);
}

/***** powerBox *****/
.powerBox {
height: inherit;
width: 150px;
margin-right: 25px;
background-color: transparent;
float: right;
top: 40px;
}

.powerBox img {
width: 50px;
height: 50px;
position: absolute;
top: 150px;
}


/***** navMenu *****/
.navMenu {
float: right;


/* position: absolute;*/
height: 180px;
width: 350px;
background-color: transparent;
}

/*.menuKnob {
margin-top: 200px;
margin-right: 250px;
position: absolute;
}

.bookingLink {
margin-left: 45px;
margin-top: 75px;
position: absolute;
}

.contactLink{
margin-left: 45px;
margin-top: 60px;
position: absolute;
}
.artistLink {
margin-left: 45px;
margin-top: 30px;
position: absolute;
}

*/.studioLink{
width: 100px;
height: 35px;
}

/***** inner content wrapper *****/

.innerContentWrapper {
width: 1200px;
height: 480px;
margin-top: 25px;
margin-left: 27px;
margin-right: 20px;
background-color: transparent;
}

/***** footer *****/
.footer {
width: 1210px;
height: 50px;
margin-left: 20px;
margin-right: 20px;
margin-top: 15px;
background-color: transparent;
}

and

#knob
{
height: 200px;
width: 300px;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-color: transparent;
}
#knob>* { position: absolute; }
#knob img,#knob div
{
user-select: none;
width:100px;
height:100px;
left: 60px;
top: 30px;
}
/*#knob a:visited{color:green}
#knob a:link{color:green}*/
a[href="index.html"]{
left: -75px;
top: 80px;
background-image: url(../images/studioOff.png);
width: 150px;
height: 50px;
}
#knob a[href="artist.html"]{
left: 45px;
top: 2px;
background-image:url(../images/artistOff.png);
width: 150px;
height: 50px;
}
#knob a:hover[href="index.html"]{
background-image: url(../images/studioOn.png);
background-color: transparent !important;
}
#knob a:hover[href="artist.html"]{
background-color: transparent !important;
background-image:url(../images/artistOn.png);
}
#knob a:hover[href="contact.html"]{
background-image:url(../images/contactOn.png);
}
#knob a:hover[href="booking.html"]{
background-image:url(../images/bookingOn.png);
}
#knob a[href="contact.html"]{
left: 175px;
top: 80px;
background-image:url(../images/contactOff.png);
width: 150px;
height: 50px;
}
#knob a[href="booking.html"]{
left: 50px;
top: 150px;
width: 150px;
height: 50px;
background-image: url(../images/bookingOff.png);
}
#knob a[href="#feed"]{
left: 45px;
top: 45px;
}
.dialed{color:red !important;}


for html and jQuery code here:

<!--css rules-->
<link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>
<link rel="stylesheet" href="css/royalslider.css" />
<link rel="stylesheet" href="css/royalslider-skins/default/default.css" />
<link rel="stylesheet" href="css/royalslider-skins/iskin/iskin.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/stylesheetIE9.css" type="text/css"/>
<![endif]-->
<link rel="stylesheet" href="css/royalslider-preview.css" />



<!-- preview-related stylesheet -->
<link rel="stylesheet" href="css/royalslider-preview.css" />
<!--javaScript-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<!--<script src="js/knob.js"></script>-->

<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/royal-slider-8.1.min.js"></script>
<script>

$('#studio').mouseover(function() {
$('.menuKnob').rotate({
//angle: 0,
animateTo: 45,
duration: 500
});
});
$('#artist').mouseover(function() {
$('#knob').rotate({
//angle: 0,
animateTo: 45,
duration: 500
});
});

$('#booking').mouseover(function() {
$('#knob').rotate({
//angle: 0,
animateTo: 113,
duration: 500
});
});
$('#contact').mouseover(function() {
$('#knob').rotate({
//angle: 0,
animateTo: 135,
duration: 500
});
});

</script>

<script>

</script>
</head>

<body>
<div class="wrapper">
<div class="header">

<img src="images/logo6.png" alt="Revolution Ink's logo"/>
<div class="navMenu" id="knob">
<img id="knob2" src="images/knob.png" alt="menu control knob" />
<a id="studio" class="studioLink" href="index.html"><!--<img src="images/studioLink.png" alt="Studio Link" />--></a>
<a id="artist" class="artistLink" href="artist.html"></a>
<a id="contact" class="contactLink" href="contact.html"></a>
<a id="booking" class="bookingLink" href="booking.html"></a>
</div><!--end of navMenu-->
</div><!--end of header-->
<div class="headerSpacer">
<div class="subNav">
<ul>
<li><a href="links.html">Links</a></li>
<li><a href="fqa.html">FQA</a></li>
</ul>
</div>
</div><!--end of headerSpacer-->