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 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Slider images and main image

    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?
    Code:
    #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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Try adding:

    Code:
    #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.
    Last edited by SB65; 12-16-2010 at 09:43 AM.

  • Users who have thanked SB65 for this post:

    quartzy (12-16-2010)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Yes, it works ,thanks so much, thought my maths was OK but obviously not.


  •  

    Posting Permissions

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