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>

Open in new window

phillystyle123Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
phillystyle123Connect With a Mentor Author Commented:
the issue turned out to be the td height inside the table that is holding the thumb. once i adjusted that  (200px - these thumbs are all going to have a max height) the thumb stopped moving when moused over.

.fourColRowPad{height:200px;}


<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>

Open in new window

0
 
mreuringConnect With a Mentor Commented:
Try to add zoom:1; to the 'affected' styles. It sounds like you're pagued by an old bug that has yet to be exterminated...
0
 
phillystyle123Author Commented:
thanks for the comment mreuring - unfortunatley i don't think zoom is doing the trick. it looks like it has something to do with the 3rd thumb in the first row being higher that the rest. the thumbs in the 2nd row don't move down when you mouseover.

http://am.cjehost.com/index_hc.php


/*BEGIN THUMB/QUICKVIEW MOUSEOVER*/
.thumbWrap{background:#00FFFF; text-align:center; style="width:136px; height:140px;zoom:1;"}
.qlOn{/*this is the thumb mouseover*/
z-index:1;
position:relative; 
left:0px;
top:20px;  
border:#b81652 4px solid; 
/*margin:10px 5px 0 5px;*/
background:#fff; 
zoom:1;
}
/*.qlOnLoad{ z-index:3;position:relative;top:20px;}*/
.qlButton{ z-index:6; /*this is the thumb onload, mouseout*/
position:relative; 
left:0px;
top:20px; 
/*margin:10px 5px 0 5px;*/ 
background:#fff; 
border:#fff 4px solid; 
zoom:1;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.