IE8 & large images --- !!

[PF Marconi]

I'm new to CSS and am using a 2 col fluid layout. I've encountered 2 problems using the DD code - and am lost as to why.

PROBLEM 1.

The background was repeating well below the bottom of any text - I've made it "no-repeat" so now just have a black bg at the bottom.
I believe the thumbnails are pushing the page down but I don't know how to sort it out.
I've overcome the problem in a rather cack-handed manner by making the bg "fixed", rather than scrolling.

PROBLEM 2.
Works fine in FF. However, everything changes in IE8. The thumbnails are fine and the enlarged images remain good on margin-top:100px.

HOWEVER - the enlarged images move to the right and cover some of the thumbnails!

I'd be very grateful for any advice.
Code below.

Thanks
Paul


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
float:right;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid #AFB3B4;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
border: 2px solid #AFB3B4;
visibility: hidden;
color: white;
text-decoration: none;
margin-top:100px;
margin-left:2px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>





<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="images/JANET1.jpg" width="250px" height="165px" border="0" /><span><img src="images/JANET1a.jpg" /><br />She's the one!</span></a>

<a class="thumbnail" href="#thumb"><img src="images/PUPPIES1.jpg" width="250px" height="165px" border="0" /><span><img src="images/PUPPIES1a.jpg" /><br />Do you think they've seen us?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="images/SLEEPIN1.jpg" width="250px" height="165px" border="0" /><span><img src="images/SLEEPIN1a.jpg" /><br />ZZZzzzzZZZZZZzzzzz....</span></a>
<a class="thumbnail" href="#thumb"><img src="images/FRAN1.jpg" width="250px" height="165px" border="0" /><span><img src="images/FRAN1a.jpg"/><br />Have you got my left profile?</span></a>

<br />
<a class="thumbnail" href="#thumb"><img src="images/JANET1.jpg" width="250px" height="165px" border="0" /><span><img src="images/JANET1a.jpg" /><br />She's the one!</span></a>

<a class="thumbnail" href="#thumb"><img src="images/PUPPIES1.jpg" width="250px" height="165px" border="0" /><span><img src="images/PUPPIES1a.jpg" /><br />Do you think they've seen us?</span></a>

</div>
</div>

[traq]

do you have this page online somewhere so we can see the problem in action?

I can try to recreate your page when I get home, but you'd get a quicker response if we could see the problem right away.

[PF Marconi]

Thanks Traq

I've just put an incomplete site online. Please access

http://www.cumbria-dog-training.com/Training.htm

Thanks again.
Paul