Results 1 to 7 of 7

Thread: popup image viewer - popup displays under other images

  1. #1
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default popup image viewer - popup displays under other images

    1) Script Title: CSS Popup Image Viewer

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

    3) Describe problem:
    IE 8.0 Version 8.0.6001.18702
    also tested in IE8 RC1

    failed

    works in FF3, Safari 3 for mac and pc and also Chrome 1.0.154.48

    I have tried adding .thumbnail:active, .thumbnail:focus to the hover states with no success.

    Screenshot of mouse over view




    Bill Strong

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sorry about that.

    Due to product NDA I can't post the links to the website.... but here is some of the code.
    I am using simple tables. If you need more let me know.

    CSS for the popup

    Code:
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover,
    .thumbnail:active, 
    .thumbnail:focus{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    	position: absolute;
    	background-color: #CCC;
    	padding: 5;
    	left: -1000px;
    	border: 1px dashed gray;
    	visibility: hidden;
    	color: black;
    	text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span,
    .thumbnail:active, 
    .thumbnail:focus{ /*CSS for enlarged image on hover*/
    	visibility: visible;
    	top: -40;
    	left: 60px; /*position where enlarged image should offset horizontally */
    }
    Sample Table HTML

    Code:
      <tr>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="144"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="134"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
      </tr>
      <tr>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
      </tr>

  4. #4
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just made a sample page only using the tables, and the CSS to NOT include any other CSS on the page I posted above. test showed that sample page tested just like the above in IE 8, it failed to display properly.
    But displayed properly in Firefox and Chrome.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    
    <style type="text/css">
    
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover,
    .thumbnail:active, 
    .thumbnail:focus{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    	position: absolute;
    	background-color: #CCC;
    	padding: 5;
    	left: -1000px;
    	border: 1px dashed gray;
    	visibility: hidden;
    	color: black;
    	text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span,
    .thumbnail:active, 
    .thumbnail:focus{ /*CSS for enlarged image on hover*/
    	visibility: visible;
    	top: -40;
    	left: 60px; /*position where enlarged image should offset horizontally */
    }
    
    </style>
    
    </head>
    <body>
    
    <table width="1025" border="1" align="center" cellpadding="5" cellspacing="0">
      <tr>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="144"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="134"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
      </tr>
      <tr>
        <td>Mini Refrigerator roll over<br />
          $199.00      <br /></td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
      </tr>
      <tr>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="144"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="134"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
      </tr>
      <tr>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
      </tr>
      <tr>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="144"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="134"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
        <td width="139"><a class="thumbnail" href="#thumb"><img src="" alt="" name="Image" width="175" height="200" id="Image" style="background-color: #999999" /><span><img src="" width="175" height="200" /><br />The Haier HSB03 Refrigerator / Freezer keeps your food fresh and your beverages ice cold in this feature-packed compact refrigerator.</span></a></td>
      </tr>
      <tr>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
        <td>Mini Refrigerator roll over<br />
    $199.00 </td>
      </tr>
    </table>
    
    
    </body>
    </html>

  5. #5
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I just tried replacing the image holder with an actual image and it did the same thing in IE8.

  6. #6
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    any headway on this?
    I tested it on Vista, win7 and XP with the same results.

  7. #7
    Join Date
    May 2009
    Location
    Saratoga Springs, NY (above Albany .. upstate NY)
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default IE hides the popup image

    Hi. I am having the same problem as wdstrongjr .. the popup image works wonderfully on FF and Chrome, but gets hidden in IE 7.

    The weird thing is that I see parts of the popup image in certain sections of the page, but its behind most of the sections.

    Is there some way to tell IE to put the popup image on the top?

    Also, wdstrongjr, did you have any luck? Did you find another solution?

    Thanks a lot.

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
  •