I have a problem with my z-index in IE only. When I load the data from the database, the use can scroll over logos and a CSS pop up box will display a description. It works fine in all browsers but IE. The pop up box z-index does not seem to be getting called. It will render above the logos that were drawn before that current logo, but will display under logos that were drawn after.
SEE http://tempcfo.com/testimonials.php
here is my code
CSS…
.thumbnail{
position: relative;
}
.thumbnail:hover{
text-decoration:none;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:left;
z-index:0;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
left:135px; /*position where enlarged image should offset horizontally */
float:left;
text-decoration:none;
z-index:500;
}
.thumbnail2{
position: relative;
}
.thumbnail2:hover{
text-decoration:none;
}
.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}
.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:right;
z-index:0;
}
.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
right:138px; /*position where enlarged image should offset horizontally */
float:right;
text-decoration:none;
z-index:500;
}
HTML…
<div id="logos" >
<table cellspacing="5" >
<tr>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;">
<img src="images/logo/20120830005810.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
“I hired tempCFO on a contracting basis to be the first CFO of my start-up company. They performed their role extremely well, building up our chart of accounts, developing a sophisticated financial model, creating powerful board presentations and overseeing the accounting function.
-Tom Mohr, Digital Air Strike </td>
</tr>
<tr>
<td class="quotee">
Tom Mohr - Digital Air Strike </td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;">
<img src="images/logo/20120830005827.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
Mitrionics AB is the technology leader in FPGA-based processing for Accelerated Computing, providing greater processing performance and a greener computing alternative, because of lower energy consumption. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">
<img src="images/logo/20120830005843.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
RelayHealth provides connectivity solutions that make it easy for consumers and healthcare organizations to securely exchange information. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">
<img src="images/logo/20120830005855.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
Propero Solutions offers world-class expertise in agile software development, Scrum methodology, agile project management, extreme programming (XP), lean and kanban development methods. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;">
<img src="images/logo/20120830005906.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
Glam Media is the pioneer and global leader of Vertical Media—a revolutionary new media model that combines our flagship properties with curated publisher sites and their passionate, engaged audiences. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
......
Thanks for any Help.
I figured this out. The page was old and written by someone else. they were using this
once I upgraded to
z-index started working correctly. So simple, so many hours wasted.