Advanced Search

Results 1 to 1 of 1

Thread: css Popup Image Viewer...Pops UNDER in Internet Explorer

  1. #1
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css Popup Image Viewer...Pops UNDER in Internet Explorer

    Hi all,
    I'm trying to implement the css pop up image viewer. I have it working now in Firefox and netscape, and almost working in Internet Explorer. Here's the problem, I'm hoping someone can help me with...

    In IE, When you rollover a thumbnail, the popup image, pops UNDER the other thumbnails. You can see what I mean if you go to
    www.webxfiles.com\web_gallery.htm

    I've had a look at another users example at
    http://www.lilhoofbeatsminiaturehors...stallions.html
    and it seems to work fine in IE!

    I've pasted the relevent css code section below...

    /* -------------------------------[ thumbs containers ]---------- */
    .content_left {
    border: solid 1px #A86E36;
    display: inline;
    float: left;
    width: 250px;
    background-color: #F4B95F;
    margin-left: 13px;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    margin-top: 10px;
    }
    .content_right {
    border: solid 1px #A86E36;
    display: inline;
    float: right;
    width: 250px;
    background-color: #F4B95F;
    margin-right: 10px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    margin-top: 10px;
    }
    .thumb_text{
    display : inline;
    float : right;
    border: solid 1px;
    }
    /* -------------------------------[ Gallery - Thumbnails - css courtesy of www.dynamicdrive.com]------------ */
    .thumbnail{
    border: solid 1px #A86E36;
    float: left;
    position: relative;
    z-index: 0;
    text-decoration: none;
    margin-right: 3px;

    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    /*--------------------------------[ Gallery Enlarged image ]---*/
    .thumbnail span{
    position: absolute;
    background-color: #F8D9AA;
    padding: 5px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    left: -1000px;
    text-decoration: none;

    }
    .thumbnail span img{
    border-width: 0;
    padding: 2px;
    }
    /*--------------------------------[ Enlarged image on hover ]--*/
    .thumbnail:hover span{
    visibility: visible;
    top: 10px;
    /*--------------------------------[ large image offset ]------*/
    left: -50px;
    /* -------------------------------[ Container for layout ]--- */
    }
    #container{
    width: 790px;
    padding:0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid #564b47;
    border-right: 1px solid #564b47;
    border-top: 1px solid #564b47;
    }
    Last edited by rainydaze; 09-20-2007 at 04:56 PM. Reason: better subject description

Bookmarks

Posting Permissions

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