www.webdeveloper.com
Results 1 to 4 of 4

Thread: Pop-Up Image CSS Question

  1. #1
    Join Date
    Nov 2006
    Posts
    593

    Talking Pop-Up Image CSS Question

    Hello,

    I was wondering is omeone could help me out with a script question. I found this script on Dynamic Drive:

    http://www.dynamicdrive.com/style/cs...-image-viewer/

    and I tried to use it on my page:

    http://catalinahotel.com/pimpmyfridge/

    It works fine in Firefox and IE and almost in Netscape. In Netscape the frame around the pop-up image is being cut off.

    I am working in Dreamweaver and I see a potential problem...some of the css styles aren't lighting up in pink:

    ".thumbnail{ position: relative;
    z-index: 0;
    }"



    and the <a class="thumbnail" href="#thumb"> isn't lighting up in green the way it usually does.

    I copied and pasted their own example and theirs works so I know it is something in my own script giving me the problem.

    Can anyone please help?

    Thank you!!!!

    Allie

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    .thumbnail{
    position: relative;
    z-index: 0;
    }

    I copied and pasted their own example and theirs works so I know it is something in my own script giving me the problem.
    I am seeing a problem with 'their script' ('simply beautiful', and 'so real-unreal') not showing at all in Firefox...

    I was under the impression from conversations sat the college that Gecko rending (Moz, Fx, NS, Seamonkey, Konquerer, etc) only recognizes indexes that are positive integers, not negatives. Not sure if "zero" actually counts as a 'positive'. We always tried to avoid "0" so that all browsers would understand. In IE-view, I see your page and I see the two examples from DD ('simply beautiful', and 'so real-unreal'? images). In Firefox, these are totally missing (due to z-index:0;??), and the page-text over-runs the container (container fails to expand).
    Last edited by WebJoel; 02-18-2007 at 07:03 PM.

  3. #3
    Join Date
    Nov 2006
    Posts
    593
    Ooops, yes sorry about the container. I didn't bother expanding it since I was going to take their example out after "testing" it out.

    I would only be needing the picture to come up so I guess I can ignore their text ('simply beautiful', and 'so real-unreal').....

    Do you know what could be wrong?

  4. #4
    Join Date
    Apr 2006
    Posts
    225
    What I would do is play around with the css of the hover to get it to display correctly within the body container so all parts will be visible.

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    and .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */

    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles