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