Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Post CSS Image gallery not working n ie6

    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




    Code:
    #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;
    }

    Code:
    <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>
    Last edited by snarf1974; 11-24-2008 at 05:21 PM. Reason: Forgot to add some text


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •