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.
Solved
thumbnail - vertical centering issue onmouseover
Posted on 2009-07-04
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:relativ
.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;
}
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:relativ
.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>
[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
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...
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
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;
}
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:200p
.fourColRowPad{height:200p
<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>
Featured Post
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…
Suggested Courses
Course of the Month11 days, 2 hours left to enroll
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.