Solved

thumbnail - vertical centering issue onmouseover

Posted on 2009-07-04
3
268 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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 …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

911 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

24 Experts available now in Live!

Get 1:1 Help Now