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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Photo Gallery problem in IE

    Hi, I'm building a CSS gallery for my friend for his company site, however, the gallery works fine in Firefox but in IE theres an issue where the image that appears on hover appears behind the other images instead of on top.

    heres the link to the page
    http://www.vdavince.com/pages/gallery.php

    and here's the CSS code associated with the photo gallery

    .photoGallery {
    cursor: default;
    list-style: none;
    }
    .photoGallery a {
    cursor: default;
    }
    .photoGallery a .preview {
    display: none;
    }
    .photoGallery a:hover .preview
    {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
    }
    .photoGallery img {
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 125px;
    height: 100px;
    }
    .photoGallery li {
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    }
    .photoGallery .preview {
    border-color: #000;
    width: 300px;
    height: 300px;
    z-index: 100;
    }

    thanks in advance for any help

  • #2
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    The problem (as far I can make it out) is that, even though the li elements are inline, IE is treating them like inline blocks - so the previews are only appearing over the top of earlier li elements.

    I'm drawing blanks as to how to fix this. You can't use your current technique if you get rid of the position:absolute from '.photoGallery a:hover .preview'.

    I'm afraid the only thing I can suggest for now is either to change the layout - if you want to keep using your current technique, you'll have to load the preview pictures into a blank area so that there's no overlap (which would probably be easier to use and more accessible); or use some ECMAScript - something like the Javascript Photo viewer
    If anyone asks my boss, this counts as work, okay?

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.cssplay.co.uk/menu/lightbox.html

    take a look a that and th eother 2 versions. I noticed you are using a transitional doctype. alot of the galleries on cssplay use strict. Ive noticed that without strict, IE doesn't like to play along. you might try changing your dotype to strict first.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guys for your help.

    I actually liked another gallery on the cssplay website so I'm going to follow his steps and hopefully that will work.

    Again, thanks.


  •  

    Posting Permissions

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