Stu Nicholls image gallery

[newgirl]

I began to create the image gallery using css by Stu Nicholls found at this site: http://www.webreference.com/programming/css_gallery/index.html.

When my thumbs are floated to the right of the container and the border is changed to white an extra space shows up to the right of each thumb knocking the next 'float right' thumb to the line below.
The thumbnails are links to the regular size images positioned left in the container and they do have an extra space for the title, a few words blah, blah, blah. Their extra space is what is on the thumbs... how do I get rid of the space on the thumbs only? Check out Stu's css to see if I missed something. Would be step 9 or 10. My css is below. I am brand new to all of this please be patient..thanks

#container{
position:relative;
width:770px;
height:396px;
margin-top:50px;
margin-left:300px;
border:1px solid #163181;
}
#container ul{
width:198px;
height:386px;
padding:0px;
margin:5px;
float:right;
list-style-type:none;
}
#container li{
float:left;
}
#container a.gallery span{
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#D2DBF7;
}
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
margin:1px 2px 1px 2px;
text-align:center;
cursor:default;
}
#container a.gallery:hover {
border:1px solid #fff;
}
#container a.gallery:hover span {
position:absolute;
background-repeat:no-repeat;
width:372px;
height:372px;
top:10px;
left:45px;
color#000;
background:#fff;
}
#container a.gallery:hover img{
border:1px solid #fff;
float:left;
margin-right:5px;
}
#container a.slidea{
background:url(images/everyday/camasstudy_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slideb {
background:url(images/everyday/nightdrama_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slidec {
background:url(images/everyday/guardrail_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slided {
background:url(images/everyday/mckenseydownriver_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slidee {
background:url(images/everyday/hacetalighthouse_th.jpg);
background-repeat:no-repeat;
height:93px;
width:60px;
}
#container a.slidef {
background:url(images/everyday/valleyrainbow_th.jpg);
background-repeat:no-repeat;
height:93px;
width:60px;
}
#container a.slideg {
background:url(images/everyday/lime_th.jpg);
background-repeat:no-repeat;
height:93px;
width:60px;
}
#container a.slideh {
background:url(images/everyday/parkbridgesunset_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slidei {
background:url(images/everyday/redwhiteblue_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slidej {
background:url(images/everyday/psssst_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slidek {
background:url(images/everyday/sweetcreekfalls_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}
#container a.slidel {
background:url(images/everyday/theeverythingflower_th.jpg);
background-repeat:no-repeat;
height:60px;
width:93px;
}

[infinityspiral]

If you upload this somewhere so that I can see it running I'll pick it apart with firebug :D

[newgirl]

thanks for the reply. I fixed the issue myself by changing the width of each thumbnail display area! Can you upload without a domain? I don't know how to do that... hence the name 'newgirl!'.

[memerson]

thanks for the reply. I fixed the issue myself by changing the width of each thumbnail display area! Can you upload without a domain? I don't know how to do that... hence the name 'newgirl!'.

You can upload files without a domain - a domain is just a name. I am assuming you meant web host ^^

You will need webspace to upload files. Your ISP may very well provide some space for free, otherwise there are many companies offering free web hosting.

[newgirl]

yes I did mean host memerson. still learning all the words etc...
thanks...