popup image viewer - popup displays under other images

**wdstrongjr** · 03-24-2009, 05:29 PM

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

**Snookerman** · 03-24-2009, 05:43 PM

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.

**wdstrongjr** · 03-24-2009, 06:08 PM

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>

**wdstrongjr** · 03-24-2009, 06:19 PM

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>

**wdstrongjr** · 03-25-2009, 02:22 PM

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

**wdstrongjr** · 03-26-2009, 11:09 AM

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

**BrianNY** · 05-03-2009, 02:52 PM

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.

Thread: popup image viewer - popup displays under other images

Thread Tools

Search Thread

popup image viewer - popup displays under other images

IE hides the popup image

Bookmarks

Bookmarks

Posting Permissions