Solved

thumbnail - vertical centering issue onmouseover

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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 …

707 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

14 Experts available now in Live!

Get 1:1 Help Now