image shifts left with sprite rollovers

[pluggmedia]

I am having the abolsutely craziest thing happen. When you hover over one of my sprite rollovers, it shift an image to the left over several pixels. The shift only occurs once on the first rollover. If anyone has any idea as to what is going on, please let me know. I have been pounding my head against the desk for hours now. It is only doing it in IE 7 too.

The link to the site is:

http://www.plugg-media.com/stephsons/st … index2.php

If anyone can assist me on this, you will save my forehead much bruising.

Here is a copy of my code:

css file:

@charset "utf-8";
/* CSS Document */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}

body {
background: #266635 url("../images/bg.jpg") top center repeat-y;
margin:0;}

ul{ list-style: none inside; }
p{ font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }

#contact{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 24px;

}

/*
a{ outline: none;}
a img{ border: none; }*/

.floatleft{ float: left;}
.floatright{ float: right;}
.clear{ clear: both;}

#coupon{
width:340px;
height:98px;
background-image: url(../images/carpetcoupon-outline.gif);
background-repeat:no-repeat;
padding:32px 29px 32px 29px;
/*padding:32px 38px 32px 38px;*/
float:top;
text-align:center;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:42px;
position:relative;
}

#page-wrap{
width:950px;
margin:0 auto;
/*border: 1px black solid;*/
}

#navigation{
float: left;
margin: 0px 0px 0px 0px;
display: block;
}
#yellow-round{

}

#top{
width:100%;
margin:0 auto;
position:relative;
top:20px;

}
#logo{
float:left;
padding: 0px 0px 0px 105px;
}
#top-right-image{
float:right;
padding: 0px 93px 0px 0px;

}
#middle{
position:relative;
top:70px;
}
#yellow-round{
background: url("../images/yellow-right.jpg");
width: 184px;
height: 248px;
float:left;
margin: 0px 0px 0px 17px;
border:1px solid black;

}
#yellow-round h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#1D672E;
font-size:18px;
text-align:right;
margin: 30px 15px 20px 20px;

}
#yellow-round h3{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#1D672E;
font-size:14px;
text-align:right;

margin: 20px 15px 20px 20px;

}

#yellow-round h4{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:16px;
text-align:right;
margin: 20px 15px 20px 20px;

}
#middle-text{
padding: 0px 30px 0px 30px;
width:360px;
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height: 20px;
}
#middle-text h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#1D672E;
font-size:18px;
line-height: 25px;

}

#top-footer{
position:relative;
top:100px;
margin: 0px 0px 0px 329px;

}
#online-specials{
background: url("../images/online-specials.jpg");

}

#nav{

width:192px;
}
#nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#nav li {
list-style-type:none;
font-size:2em;
}
ul#nav li{
display:inline;
}
ul#nav li a{
display:block;
width:192px;
text-indent: -9999px;
float: top;

border:1px solid black;
}

ul#nav li.home a{
height:50px;
background: url("../images/home.jpg") center center no-repeat;
}
ul#nav li.services a{
height:53px;
background: url("../images/services.jpg") center center no-repeat;
}
ul#nav li.testimonials a{
height:54px;
background: url("../images/testimonials.jpg") center center no-repeat;
}
ul#nav li.specials a{
height:53px;
background: url("../images/specials.jpg") center center no-repeat;
}
ul#nav li.contactus a{
height:53px;
background: url("../images/contactus.jpg") center center no-repeat;

}

ul#nav li a:hover{
background-position: top center;
border:1px solid black;
display: block;
}

code on website:

<?
include(‘config.php’);

$query="Select * from `stephson_content` where `page`=’home’";
$result=ftb_query($query);
$results=mysql_fetch_assoc($result);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stepsons Carpet Cleaning</title>
<?
if(browser_detection(‘browser’)=="mozilla")
echo(‘<link rel="stylesheet" href="css/style.css" type="text/css">’);
else if(browser_detection(‘browser’)=="msie")
echo(‘<link rel="stylesheet" href="css/iestyle.css" type="text/css">’);

?>
</head>

<body>
<div id=header>

</div>

<div id="page-wrap">
<div id="top">
<div id="logo">
<img src="images/logo.png" />
</div>
<div id="top-right-image">
<img src="images/van4.jpg" />
</div>
<div class="clear"></div>
</div>
<div id="middle">
<div id="navigation">
<ul id="nav">
<li class="home"><a href="index.htm">Home</a></li>
<li class="services"><a href="services.php">Services</a></li>
<li class="testimonials"><a href="testimonials.php">Testimonials</a></li>
<li class="specials"><a href="specials.php">Specials</a></li>
<li class="contactus"><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<div id="middle-text">
<h2>Welcome</h2>
<img src="images/greybar.gif" />
<br />
<br />
<?
echo($results);

?>

</div>
<div id="yellow-round">
<br />
<br />
<h2>Call Us Today!</h2>
<h4><b>614-759-1539</b></h4>
<h3>Serving the Central Ohio Area</h3>
</div>

</div>

</div>
<div id="footer">
<div id="top-footer">
<img src="images/greybar-bottom.gif" />
<br />
<img src="images/bottom.jpg" />

</div>
</div>

</body>
</html>

[Author]

Posts