HOW to fix image probs in IE

[PFMarconi]

I'm making a simple, 2 col fluid site. The problem is to do with enlarging images from thumbnails. All is fine in FF but goes haywire in IE - I'm previewing on IE8. (This is not the final version but there seems little point in continuing when there are problems)

Please see the two browsers below along with the code.

Due to a legal situation, I'm unable to upload anything at the moment.
Many thanks for any help.

Paul

CSS
 
 
 
 
/*************************************************************
        COLUMNS
**************************************************************/
#col1
{
    float: left;
    margin-left:8%;
    margin-right:1%;
    margin-top:25px;
    border-top:1px solid #999999;
    padding-top:10px;
    width:35%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:17px;
    color:#333333;
 
}
#col2
{
    float:left;
    margin-left:1%;
    width: 45%;
    margin-top:25px;
    border-top:1px solid #999999;
    padding-top:10px;
    padding-left:5px;
    padding-right:25px;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:18px;
    color:#333333;
    text-align:center;
}
 
 
/*************************************************************
        FOOTER
**************************************************************/
 
 
 
#footer
{
    width:50%;
    float:left;
    margin-left:8%;
    margin-right:2%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:16px;
    text-align:left;
    color:#ffffff;
    margin-top:20px;
 
    }
#subfooter
 
 
 
 
{   
    width:32%;
    float:right;
    margin-left:1%;
    margin-right:1%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:12px;
    text-align:center;
    color:#ffffff;
    margin-top:23px;
}
/*************************************************************
        DYNAMIC DRIVE images
**************************************************************/
 
 
 
<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>

HTML

 
 
 
<div id="col2"><br>
 
 
 
<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>
<div id="footer">Bolton <strong>&middot;</strong> Appleby in Westmorland <strong>&middot; </strong>Cumbria <strong>&middot; CA16 6AT </strong><strong>&middot;</strong> Tel.[phone]</div>
<div id="subfooter">&copy; The Magic 6 2010</div>
 
 
 
</body>
</html>

[JKing]

Could you explain exactly what is going haywire?

I checked out your code on my machine the only difference I can see is the span tag being stretched in IE 8. Is this the issue you are referring to?

[PFMarconi]

Thanks JKing

I've just uploaded an incomplete site, but you'll see the problem with this link;

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

[drhowarddrfine]

In your CSS you have the <style> tags. Those are HTML. Remove them. They might be tripping up IE.

[PFMarconi]

Many thanks dr

I'll correct things as soon as I get home tonight.

Paul