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:relative;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;
}

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>

Select all Open in new window