Cursor Trail?

[Guest VMDesigns]

I am using the cursor image trail provided here at dynamic drive. This is the website: http://www.stunningstitches.net/cart.php?act=cart

My problem is and I have a feeling it deals with the layers of the website, the image trail will in some areas be 3 inches above the cursor, it will go to the other side of the page (hover over the links on the right side, look over at the left, there is the lady bug image trail). This is one of my clients websites, she came to me asking me to fix her cube cart because it was not working properly after another designer had messed it up. She requested a cursor trail after I fixed the cube cart, etc. and am now running into problems.

Here is my CSS:

body {

	margin: 0px;

	background-image: url(../styleImages/backgrounds/SS-background.jpg);

	background-repeat: repeat;

	background-position: top;

}

#pageSurround {

	width: 95%;

	height: 100%;

	margin-right: auto;

	margin-left: 0px;

	padding: 0px;

	border-bottom: 0px;

	background-image: url(../styleImages/backgrounds/stunningbg.jpg);

	background-repeat: repeat-y;

	margin-bottom: 0px;

}

#topHeader {

	text-align: center;

	background-image: url(../styleImages/backgrounds/stunninglogo.jpg);

	background-repeat: no-repeat;

	background-position: center;

	height: 210px;

}

.colMid {

	z-index: 1;

	position: relative;

	width: 600px;

	float: left;

	padding-left: 150px;

}

.boxTitleLeft, .boxTitleRight {

	font-family: Curlz MT, Verdana, Arial, Helvetica, sans-serif;

	font-size: 100%;

	color: #FFFFFF;

	height: 15px;

	padding-left: 0px;

	margin-bottom: 15px;

}

.boxContentLeft, .boxContentRight {

	padding-left: 5px;

	margin-bottom: 10px;

	padding-top: 5px;

	padding-bottom: 5px;

}



.colRight {

	z-index: 2;

	position: relative;

	width: 160px; 

	padding-left: 5px;

	right: 0px;

	float: right;

}

.boxContent {

	padding-left: 3px;

	font-family: Curlz MT, Verdana, Arial, Helvetica, sans-serif;

	font-size: 100%;

	color: #333333;

	margin-bottom: 5px;

}



/* CHECKOUT PAGES */

.colLeftCheckout {

	z-index: 1;

	position: relative;

	left: 0px;

	width: 160px; 

	padding-left: 0px;

	padding-right: 0px;

	float: right;

}

.colMainCheckout {

	z-index: 2;

	position: relative;

	width: 568px;

	float: left;

	padding-left: 150px;

}

/* END CHECK OUT PAGES */

.siteDocs {

	text-align:center;

	margin-top: 10px;

}

.pagination {

	text-align: right;

	padding-top: 5px;

	padding-bottom: 5px;

}

#subCats {

	text-align: center;

	margin: 0px;

	padding: 3px;

	float: left;

	width: 600px;

}



.subCat {	

	text-align: center;

	padding: 50px;

	float: left;

	width: 110px;

	height: 50;

}

.regSep{

	padding: 10px 0px 10px 0px;

	margin: 10px 0px 10px 0px;

	border-top: 1px solid #cccccc;

	border-bottom: 1px solid #cccccc;

}

.latestProds {

	float: left;

	text-align: center;

	width: 131px;

	height: 120px;

}

a.mainCat {

	border: 0px;

}

I added z-index's as I had seen in some other forums that, that may solve the problem. However it doesn't. If any one may have a solution or may be able to direct me to help, I'd appreciate it. I can also provide the code of the script as well if needed.