Solved

thumbnail - vertical centering issue onmouseover

Posted on 2009-07-04
3
274 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
  • 2
3 Comments
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 100 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

813 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now