...

View Full Version : CSS Image gallery not working n ie6



snarf1974
11-24-2008, 04:19 PM
Hi,

I've nearly got this sorted, but as usual, IE6 is being a royal pain the proverbial!!!!

The image gallery works in Firefox, but if you click on the thumbnails in IE6, the large picture does not change.

Also, a slight little bug in Safari I've noticed is that when you click on a thumbnail, it only briefly appears. Yet if you click and hold down button, the large image displays.

The html and css is included here. The website is: www.wsi-preview.co.uk/lindstrand/about-us

Any help would be appreciated.

Many Thanks





#imageplayer { width: 279px; height: 224px; margin: 0 0 15px 0; padding: 0; position: relative; }
.imgmain { width: 270px; height: 169px; border: #98A8B6 3px solid; margin: 0 0 -1px 0; padding: 0; }


#gallerywrapper{
float:left;
position:relative;
z-index:5;
}

.gallerydisplay {
padding:0;
margin:0px 0 0 0;
list-style-type:none;
float:left;
}



.gallerydisplay li {
float:left;
margin:0 0 0 0;
}

.gallerydisplay li a img.mainimage {
position:absolute;
visibility:hidden;
border: #98A8B6 3px solid;
top:0px;
left:0px;
z-index:5;
}

.gallerydisplay li a:active img.mainimage, .gallerydisplay li a:focus img.mainimage {
visibility:visible;
}

.gallerydisplay li img.thumbnail{
height:39px;
width:84px;
margin: 3px 3px 0 0;
padding: 0;
border: #98A8B6 3px solid;
}


#defaultimage img{
position:absolute;
top:px;
left:0;
z-index:-1;
}



<div id="imageplayer">
<img class="imgmain" src="../images/imgplayer-about1.jpg" title="Image 1" alt="Image 1" />

<ul class="gallerydisplay">
<li>
<a href="#">
<img class="thumbnail" src="../images/imgplayerthumb-about1.jpg" alt="Image 1" />
<img class="mainimage" src="../images/imgplayer-about1.jpg" alt="Image 1" />
</a>
</li>

<li>
<a href="#">
<img class="thumbnail" src="../images/imgplayerthumb-about2.jpg" alt="Image 2" />
<img class="mainimage" src="../images/imgplayer-about2.jpg" alt="Image 2" />

</a>
</li>

<li>
<a href="#">
<img class="thumbnail" src="../images/imgplayerthumb-about3.jpg" alt="Image 3" />
<img class="mainimage" src="../images/imgplayer-about3.jpg" />

</a>
</li>
</ul>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum