Results 1 to 3 of 3

Thread: CSS Popup Image Viewer

  1. #1
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Popup Image Viewer

    I've implemented this script (http://www.dynamicdrive.com/style/cs...-image-viewer/) into my site.

    The images at the very top "FAST SHIPPING" and "CREDIT CARDS" appear when the page loads and the pop up works fine in FireFox 5.0.

    However, in IE 9, these images disappear for some reason. I would please like help in troubleshooting why these images disappear in IE. Is there something conflicting causing these images to disappear?

    Below is my website.
    http://www.discountdressshop.com/hom...g-dresses.html


    Below is the code I've used for the images and the CSS.

    <a class="popupviewer" href="#thumb"><img src="http://site.discountdressshop.com/images/fast-shipping.gif" alt="Fast Shipping Every Tuesday and Friday" width="115" height="55" border="0"><span><img src="http://site.discountdressshop.com/images/we-ship-every-tuesday-friday.jpg" /><br />
    </span></a></td>
    <td align="right" valign="middle"><a class="nail" href="#thumb"><img src="http://site.discountdressshop.com/images/creditcardsaccepted.gif" alt="Credit Cards Accepted" width="138" height="51" border="0"><span><img src="http://site.discountdressshop.com/images/pop-ccaccept.jpg" /><br />
    </span></a>



    .popupviewer{
    position: relative;
    z-index: 0;
    }

    .popupviewer:hover{
    background-color: transparent;
    z-index: 50;
    }

    .popupviewer span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #CCCCCC;
    padding: 5px;
    left: -1000px;
    border: 1px solid #CCCCCC;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .popupviewer span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

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

    }


    .nail{
    position: relative;
    z-index: 0;
    }

    .nail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .nail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #CCCCCC;
    padding: 5px;
    left: -1000px;
    border: 1px solid #CCCCCC;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .nail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

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

    }

  2. #2
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am still experiencing the "disappearing" of the images on the top of my website. Is there anyone who can help me figure out why this is occurring?

  3. #3
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello! My first post!

    I used this code also...but my images aren't appearing in the correct size. i followed the code exactly... please help! A sample is at http://coyotemktg.com/jeffrey/

    Thank you!!

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
  •