IE のみで z-index に問題があります。データベースからデータをロードすると、ロゴをスクロールでき、CSS ポップアップ ボックスに説明が表示されます。IE 以外のすべてのブラウザで正常に動作します。ポップアップ ボックスの z-index が呼び出されていないようです。現在のロゴの前に描画されたロゴの上にレンダリングされますが、後に描画されたロゴの下に表示されます。
http://tempcfo.com/testimonials.phpを参照
ここに私のコードがあります
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>
......
助けてくれてありがとう。