...

View Full Version : Slider images and main image



quartzy
12-15-2010, 10:51 PM
I have a main image and the on the side what should be two columns of mini images, trouble is in IE6 the images are shown in one column and so are disturbing the layout.

Have I got the layout right?

#gallery {width:775px; height:500px; margin-left:70px; padding: 0; position:relative;}
#gallery #slides {position:absolute; left: 545px; top:40px; height:500px; z-index:500;}
#gallery #slides div {width:196px; height:500px;}
#gallery #slides div ul {padding:3px; margin:0; list-style:none; height:353px}
#gallery #slides div ul li {float:left; display: inline; padding:1px 0; width:94px; height:69px;}
#gallery #slides div ul li a {display:inline-block; width:92px; height:69px; float:left;}
#gallery #slides div ul li a b {display:none;}
#gallery #slides div ul li a img {display:block; width:92px; height:69px; border:0;}
#gallery #slides div ul li a:focus {outline:0;}

#gallery #slides #slide2 {float:right; width: 92px; height: 550px; position: relative;}

#gallery #fullsize {position:absolute; left:30px; top:0; height:500px; width:775px; overflow:hidden; z-index:300;}

#gallery #fullsize div {width:775px; height:500px; padding-top:30px;}
#gallery #fullsize div img {clear:both; display:block; border:1px solid #eee; width:480px; height:360px; position:relative; background:#fff; padding:10px;}
#gallery #fullsize div h3 {width: 480px; height: auto; padding-top:10px; margin:0; font-size:18px; text-align: center;}
#gallery #fullsize div p {width: 480px; height: auto; text-align: center; margin:0; font-size:0.75em; line-height:18px;}


I need the code to show two columns in IE6 like it does in other browsers. www.leeoasis.org.uk/drop-in.html

SB65
12-16-2010, 09:37 AM
Try adding:


#gallery #slides div ul {
height: 353px;
list-style: none outside none;
margin: 0;
padding: 3px;
width: 200px;
}

Your images are also a little more spaced in IE6 because the image doesn't quite fit in the li, and IE6 is expanding the container. You have an image with width 92px, height 69px, and 3px padding, total dimensions 98px by 75px. However the containing anchor only has dimensions 92px by 69px (and the li containing that is also not big enough) . If you resolve this you should get a consistent display across IE6.

quartzy
12-16-2010, 12:19 PM
Yes, it works ,thanks so much, thought my maths was OK but obviously not.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum