Image Gallery CSS IE8 hover problem!

[ajitaw]

1) Script Title: Image Gallery CSS

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...-gallery/P390/

Hi, I have tried for two days to get this script to display properly on IE8 but I have finally given up and have to call in for backup
The page is here: http://www.downtoearth.org/our-store.../honolulu-oahu

The site is hosted on drupal but I'll attach my CSS. I needed a different location for each popup so I did it like this. The problem is that in IE8 the bigger images are just sitting there below the thumbs not hidden and don't react to the hover.

.location-pics {width:550px; padding:10px; height:90px; margin:-15px 0px 0px 10px;}

.thumbnail {width:85px; height:85px; padding:5px; background-color:#e9e9e9; float:left; margin:0px 5px; position: relative; z-index: 1;}
.thumbnail:hover{background-color: transparent; z-index: 51;}

.thumbnail span1{visibility: hidden; position: absolute; background-color: #15691c; padding: 5px; left: -1000px; border: 1px solid black; color: white; text-decoration: none;}
.thumbnail span1 img{border-width: 0; padding: 2px;}
.thumbnail:hover span1{visibility: visible; position:absolute; top: 0; left: 5px; top: -390px; z-index: 50;}

.thumbnail span2{visibility: hidden; position: absolute; background-color: #15691c; padding: 5px; left: -1000px; border: 1px solid black; color: white; text-decoration: none;}
.thumbnail span2 img{border-width: 0; padding: 2px;}
.thumbnail:hover span2{visibility: visible; position:absolute; top: 0; left: -100px; top: -390px; z-index: 50;}

.thumbnail span3{visibility: hidden; position: absolute; background-color: #15691c; padding: 5px; left: -1000px; border: 1px solid black; color: white; text-decoration: none;}
.thumbnail span3 img{border-width: 0; padding: 2px;}
.thumbnail:hover span3{visibility: visible; position:absolute; top: 0; left: -205px; top: -390px; z-index: 50;}

.thumbnail span4{visibility: hidden; position: absolute; background-color: #15691c; padding: 5px; left: -1000px; border: 1px solid black; color: white; text-decoration: none;}
.thumbnail span4 img{border-width: 0; padding: 2px;}
.thumbnail:hover span4{visibility: visible; position:absolute; top: 0; left: -310px; top: -390px; z-index: 50;}

.thumbnail span5{visibility: hidden; position: absolute; background-color: #15691c; padding: 5px; left: -1000px; border: 1px solid black; color: white; text-decoration: none;}
.thumbnail span5 img{border-width: 0; padding: 2px;}
.thumbnail:hover span5{visibility: visible; position:absolute; top: 0; left: -415px; top: -390px; z-index: 50;}

<div class="location-pics">
<a class="thumbnail" href="#thumb">
<img src="http://archive.downtoearth.org/images/stores/KingStRegisters_s.jpg" width="85px" height="85px" border="0" /><span1><img src="http://archive.downtoearth.org/images/stores/KingStRegisters.jpg" />Honolulu Store Entrance</span1></a>
<a class="thumbnail" href="#thumb"><img src="http://archive.downtoearth.org/images/stores/KingStWellness_s.jpg" width="85px" height="85px" border="0" /><span2><img src="http://archive.downtoearth.org/images/stores/KingStWellness.jpg" />Honolulu Wellness Department</span2></a>
<a class="thumbnail" href="#thumb"><img src="http://archive.downtoearth.org/images/stores/KingStProduce_s.jpg" width="85px" height="85px" border="0" /><span3><img src="http://archive.downtoearth.org/images/stores/KingStProduce.jpg" />Honolulu Produce Department</span3></a>
<a class="thumbnail" href="#thumb"><img src="http://archive.downtoearth.org/images/stores/KingStDeli_s.jpg" width="85px" height="85px" border="0" /><span4><img src="http://archive.downtoearth.org/images/stores/KingStDeli.jpg" />Honolulu Deli hot table and salad bar</span4></a>
<a class="thumbnail" href="#thumb"><img src="http://archive.downtoearth.org/images/stores/KingStBulk_s.jpg" width="85px" height="85px" border="0" /><span5><img src="http://archive.downtoearth.org/images/stores/KingStBulk.jpg" />Honolulu Bulk Department</span5></a></div>

Again, this works in pretty much everything except for IE8 and I've tried every "hack" and "fix" that I could find but maybe I am too zoned to even see the problem right under my nose.

[jscheuer1]

That's invalid markup. I think, at least it's non-standard for IE less than 9. But I think it's also invalid for the DOCTYPE. Others are letting you slide, but IE 8 and less are not. Where you have:

<span1>

<span2>

etc. Make those:

<span id="span1">

<span id="span2">

etc. And where you have </span1> and similar, make all of those just:

</span>

Then in the stylesheet (/sites/default/files/css/css_763a3c2441c0f764688a12c1fbc78439.css) make all the:

span1

span2

span3

references into:

#span1

#span2

#span3

Works here in a local mock up.