Results 1 to 3 of 3

Thread: CSS popup image viewer w/tables not working in Opera 9

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

    Default CSS popup image viewer w/tables not working in Opera 9

    1) Script Title: CSS Popup Image Viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...p-image-viewer

    3) Describe problem: I have a site that I am required to format XHTML Transitional using only tables...no choice. I have a table with multiple cells. In each cell is a person's name that I want to rollover and have their picture appear. The script works perfect in IE7 & Firefox 2.0.0.9 but I can not get it to work correctly in Opera 9.24 Only part of the image opens within the confines of the cell. I have tested my Opera on the samples provided and it works perfect so I know it is not my Opera installation being corrupt. W3C shows that my code validates. I am using Dreamweaver CS3. What am I missing? Thanks in advance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That css gallery was unstable in earlier versions of Opera and then smoothed out in v 9.01 I think it was. In 9.24 it is again unstable. Even on the demo page, if I move my mouse over the left hand area (this is with a wide enough screen that there is a lot of blank space over there), the pop ups pop up, even though I'm not over them. And the 'sushi' pop up is partly cut off.

    That said, I think it might just be a poorly thought out layout on the demo page that is causing those problems, and the same may be true of your set up. Tables, in and of themselves, shouldn't be causing this.

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    in the css file replace the default styles with
    Code:
    .thumbnail{
         position: relative;
         z-index: 0;
    }
    .thumbnail:hover {
         background-color: transparent;
         z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image (and caption) */
          display:none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
         border: none;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
         display: block;
         position: relative;
         top: 10px;   /* offset vertically */
         left: 60px;   /* offset horizontally */
         padding: 2px;
         z-index: 100; /* brings image to foreground */
    }
    Edit:
    it is important to note that since you are being restricted to use tables only, and the transitional doctype it is very likely the client is going to be viewing this with Internet Explorer, and I am not sure if IE7 has given support to the psuedo-selector :hover. if not this will only work on anchor a tags.
    I know that IE6 does not have support, and I personally along with a good number of people have not upgraded to IE7 even if it is supported. So if you intend to use this on an element that is not an anchor tag you will need to use the hover mod
    Last edited by boogyman; 11-20-2007 at 03:27 PM. Reason: added note

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
  •