CSS and IE8 Problem

[myth3_16]

Hello all,

I wonder if anyone can help me i've got this page here (http://www.personally-yours.co.uk/scrolls/tester.php)

The problem I have with it is that it almost freezes when scrolling down to the examples on the page.

The code that this runns from is in a CSS stylesheet. I have fully checked my code and CSS and validated them and they are fully validated.

I was wondering if anyone else had seen this sort of problem before.

the code in the stylesheet is as follows:

#pic {	position: relative;
	width: 54px;
	z-index: 6;
}

#pic a .large {
	border: 0px;
	display: block;
	height: 0px;
	left: -1px;
	position: absolute;
	top: 1px;
	width: 1px;
	}

#pic a img {
	border: 0;
}


#pic a.p1, #pic a.p1:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic a.p1:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic a.p1:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 150px;
	position: absolute;
	top: -60px;
}
/*married images */
#pic2 {
	position: relative;	width: 54px;
	z-index: 5;
}

#pic2 a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic2 a img {
	border: 0;
}


#pic2 a.p2, #pic2 a.p2:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic2 a.p2:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic2 a.p2:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 150px;
	position: absolute;
	top: -60px;
}
/*christened images */
#pic3 {
	position: relative;	width: 54px;
	z-index: 4;
}

#pic3 a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic3 a img {
	border: 0;
}


#pic3 a.p3, #pic3 a.p3:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic3 a.p3:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic3 a.p3:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 75px;
	position: absolute;
	top: -60px;
}
/*first name images */
#pic4 {
	position: relative;	width: 54px;
	z-index: 3;
}

#pic4 a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic4 a img {
	border: 0;
}


#pic4 a.p4, #pic4 a.p4:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic4 a.p4:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic4 a.p4:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 75px;
	position: absolute;
	top: -60px;
}
/*first name images */
#pic5 {
	position: relative;	width: 54px;
	z-index: 2;
}

#pic5 a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic5 a img {
	border: 0;
}


#pic5 a.p5, #pic5 a.p5:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic5 a.p5:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic5 a.p5:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 75px;
	position: absolute;
	top: -60px;
}
/*first name images */
#pic6 {
	position: relative;	width: 54px;
	z-index: 1;
}

#pic6 a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic6 a img {
	border: 0;
}


#pic6 a.p6, #pic6 a.p6:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic6 a.p6:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic6 a.p6:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 75px;
	position: absolute;
	top: -60px;
}
/*first name images */
#pic7 {
	position: relative;	width: 54px;
	z-index: 0;
}

#pic7 a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic7 a img {
	border: 0;
}


#pic7 a.p7, #pic7 a.p7:visited {
	height: 125px;
	left: 0;
	text-decoration: none;
	top: 0;	width: 109px;
}

#pic7 a.p7:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic7 a.p7:hover .large {
	border: 1px solid #000000;
	width: 350px;
	height: 466px;
	display: block;
	left: 75px;
	position: absolute;
	top: -60px;
}

Any help would be appreciated.

Thanks, :D

[MidiMagic]

The problem I see is that the script (or whatever is making the images appear) is taking over, preventing scrolling from working.

[myth3_16]

so is there any suggestions about what I can do to rectify it?

[MidiMagic]

Put delays in your script, so it is not running continuously.