Thanks for the update.
Could you show me where the code isn’t up to scratch?

I have reproduced the code but at the point where the large images are to be hidden in 1 pixel it doesn’t seem to work. I have gone through the code with a comb and I cannot find an error. I am a novice at this and desperately need some help. I am using Dreamweaver CS4 would this affect the code?

gallerytut

body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #000;
}
body {
background-color: #FFF;
}
#container {
height: 450px;
width: 550px;

}
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.photoa {
background:url(Images/Angry-Mouse-Sketch.jpg);
height:80px;
width:80px;
}
#container a.photob {
background:url(Images/Maisy.jpg);
height:80px;
width:80px;
}
#container a.photoc {
background:url(Images/Life_drawing.JPG);
height:80px;
width:80px;
}
#container ul {
width:180px;
height:340px;
}
#container li {
float:left;
}
#container a.gallery:hover span {
position:absolute;
width:450px;
height:350px;
top:10px;
left:170px;
color:#000;
background:#fff;
}
#container a.gallery:hover { border:1px solid #fff;}