phillystyle123
asked on
thumbnail - vertical centering issue onmouseover
In IE7:
http://am.cjehost.com/
mouseover the 1st 2 thumbs in the 1st row - they shift down to valign middle with the 3rd thumb in the 1st row. After the shift they are valign middle which is the way i need them to display onload as well.
RELEVANT STYLES:
/*BEGIN THUMB/QUICKVIEW MOUSEOVER*/
.qlOn{/*this is the thumb mouseover*/
z-index:1;
position:relative;
left:0px;
top:20px;
border:#b81652 4px solid;
margin:10px 0 0 10px;
background:#fff;
}
/*.qlOnLoad{ z-index:3;position:relativ e;top:20px ;}*/
.qlButton{ z-index:6; /*this is the thumb mouseout*/
position:relative;
left:0px;
top:20px;
margin:10px 0 0 10px;
background:#fff;
border:#fff 4px solid;
}
http://am.cjehost.com/
mouseover the 1st 2 thumbs in the 1st row - they shift down to valign middle with the 3rd thumb in the 1st row. After the shift they are valign middle which is the way i need them to display onload as well.
RELEVANT STYLES:
/*BEGIN THUMB/QUICKVIEW MOUSEOVER*/
.qlOn{/*this is the thumb mouseover*/
z-index:1;
position:relative;
left:0px;
top:20px;
border:#b81652 4px solid;
margin:10px 0 0 10px;
background:#fff;
}
/*.qlOnLoad{ z-index:3;position:relativ
.qlButton{ z-index:6; /*this is the thumb mouseout*/
position:relative;
left:0px;
top:20px;
margin:10px 0 0 10px;
background:#fff;
border:#fff 4px solid;
}
HTML:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---begin 4 column row-->
<tr>
<td valign="middle" align="center">
<!---begin single thumb box-->
<table width="136" border="0" cellspacing="0" cellpadding="0" class="fourColRowPad">
<tr>
<td width="136" align="center">
<a href="detail_vertical.php">
<img src="images/fpo_thumb_num2.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /> </a>
<a href="modal.php" onclick="openMyModal('modal.php'); return false;">
<img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'" src="images/QuickViewButton.png" border="0"/> </a> </td>
</tr>
</table>
<!---end single thumb box--> </td>
<td valign="middle" align="center">
<!---begin single thumb box-->
<table width="136" border="0" cellspacing="0" cellpadding="0" class="fourColRowPad">
<tr>
<td width="136" align="center"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num1.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /> </a><a href="modal.php" onclick="openMyModal('modal.php'); return false;">
<img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'" src="images/QuickViewButton.png" border="0"/> </a> </td>
</tr>
</table>
<!---end single thumb box--> </td>
<td valign="middle" align="center">
<!---begin single thumb box-->
<table width="136" border="0" cellspacing="0" cellpadding="0" class="fourColRowPad">
<tr>
<td width="136" align="center"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num4.jpg" width="102" height="159" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /> </a><a href="modal.php" onclick="openMyModal('modal.php'); return false;">
<img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'" src="images/QuickViewButton.png" border="0"/> </a> </td>
</tr>
</table>
<!---end single thumb box--> </td>
</tr>
<!---end 4 column row-->
<!---begin 4 column row-->
<tr>
<td valign="middle" align="center">
<!---begin single thumb box-->
<table width="136" border="0" cellspacing="0" cellpadding="0" class="fourColRowPad">
<tr>
<td height="136" width="136" align="center">
<a href="detail_vertical.php">
<img src="images/fpo_thumb_num2.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /> </a>
<a href="modal.php" onclick="openMyModal('modal.php'); return false;">
<img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'" src="images/QuickViewButton.png" border="0"/> </a> </td>
</tr>
</table>
<!---end single thumb box--> </td>
<td valign="middle" align="center">
<!---begin single thumb box-->
<table width="136" border="0" cellspacing="0" cellpadding="0" class="fourColRowPad">
<tr>
<td height="136" width="136" align="center">
<a href="detail_vertical.php">
<img src="images/fpo_thumb_num2.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /> </a>
<a href="modal.php" onclick="openMyModal('modal.php'); return false;">
<img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'" src="images/QuickViewButton.png" border="0"/> </a> </td>
</tr>
</table>
<!---end single thumb box--> </td>
<td valign="middle" align="center">
<!---begin single thumb box-->
<table width="136" border="0" cellspacing="0" cellpadding="0" class="fourColRowPad">
<tr>
<td height="136" width="136" align="center">
<a href="detail_vertical.php">
<img src="images/fpo_thumb_num2.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /> </a>
<a href="modal.php" onclick="openMyModal('modal.php'); return false;">
<img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'" src="images/QuickViewButton.png" border="0"/> </a> </td>
</tr>
</table>
<!---end single thumb box--> </td>
</tr>
<!---end 4 column row-->
<!---begin 4 column row-->
<!---end 4 column row-->
<!---begin 4 column row-->
<!---end 4 column row-->
</table>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
http://am.cjehost.com/index_hc.php
Open in new window