Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

thumbnail - vertical centering issue onmouseover

Posted on 2009-07-04
3
Medium Priority
?
315 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:phillystyle123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 400 total points
ID: 24780396
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
 

Author Comment

by:phillystyle123
ID: 24780982
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
 

Accepted Solution

by:
phillystyle123 earned 0 total points
ID: 24781058
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question